JavaScript DOM擴展——「專有擴展」的注意要點

時間 2019-12-05

標籤 javascript dom 擴展專有注意要點欄目 JavaScript 简体版

原文原文鏈接

文檔模式

頁面的文檔模式是由IE8引入的，文檔模式決定了可使用的CSS級別、JS中的API以及如何對待文檔類型（doctype）；在IE9，提供了4中文檔模式：html

IE5：混雜模式；chrome
IE7：IE7標準模式渲染頁面；瀏覽器
IE8：IE8標準模式渲染頁面，可使用Selectors API、更多CSS2級選擇符和某些CSS3功能、HTML5的一些功能；測試
IE9：IE9標準模式渲染頁面，這個文檔模式是最高級的模式；ui

要強制瀏覽器以某種模式渲染頁面，可使用HTTP頭部信息X-UA-Compatible，或經過等價的meta標籤來設置：code

<meta http-equiv="X-UA-Compatible" content="IE-IEVersion">

其中IEVersion有如下取值：htm

Edge：始終以最新的文檔模式來渲染頁面；ip
EmulateIE9：若是有文檔類型聲明，以IE9標準模式渲染頁面，不然將文檔模式設置爲IE5；element
EmulateIE8：若是有文檔類型聲明，以IE8標準模式渲染頁面，不然將文檔模式設置爲IE5；文檔
EmulateIE7：若是有文檔類型聲明，以IE7標準模式渲染頁面，不然將文檔模式設置爲IE5；
9：強制以IE9標準模式渲染頁面，忽略文檔類型聲明；
8：強制以IE8標準模式渲染頁面，忽略文檔類型聲明；
7：強制以IE7標準模式渲染頁面，忽略文檔類型聲明；
5：強制以IE5標準模式渲染頁面，忽略文檔類型聲明；

如：

<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">

或直接使用IE7模式：

<meta http-equiv="X-UA-Compatible" content="IE-7">

經過document.documentMode屬性能夠知道給定頁面使用的是什麼文檔模式。

`children`屬性

該屬性只包含元素中一樣仍是元素的子節點，除此以外，該屬性與childNodes沒區別；

console.log(document.body.children.length);

IE<9的瀏覽器有bug；

`contains()`方法和`compareDocumentPosition()`方法

前者調用的應該是祖先節點，接收一個參數即要檢測的後代節點；後者則是DOM Level 3中的，會返回以下掩碼：

Bits Number Meaning
000000 0 元素一致
000001 1 節點在不一樣的文檔（或者一個在文檔以外）
000010 2 節點 B 在節點 A 以前
000100 4 節點 A 在節點 B 以前
001000 8 節點 B 包含節點 A
010000 16 節點 A 包含節點 B
100000 32 瀏覽器的私有使用

對於contains()方法，以下：

console.log(document.documentElement.contains(document.body)); //true

對於compareDocumentPosition()方法則：

var result = document.getElementById("divId").compareDocumentPosition(document.getElementById("pId"));
//4，給定的節點pId在參考的節點divId的後面，居後
var result = document.getElementById("pId").compareDocumentPosition(document.getElementById("divId"));
//2，給定的divId在參考的pId的前面，居前
var result = document.documentElement.compareDocumentPosition(document.body);
//20（16+4），給定的body被包含於參考的html中而且位於其以後
var result = document.body.compareDocumentPosition(document.documentElement);
//10（8+2），給定的html是參考的body的祖先而且位於其前
var result = document.body.compareDocumentPosition(document.body);
//0 元素一致；

插入文本

`innerText`屬性

該屬性能夠操做元素中包含的全部文本內容；如下面代碼示例：

<div id="content">
    <p>This is a <strong>paragraph</strong> with a list following it.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

其innerText屬性會返回以下字符串：

This is a paragraph with a list following it.

Item 1
Item 2
Item 3

若是設置其innerText，則會變成這樣：

document.getElementById("content").innerText = "hello there";

console.log(document.body.outerHTML);
// <body>
//     <div id="content">hello there</div>
//     <script src="testingjs.js"></script>
// </body>

若是在其中加入了html標籤，則會變成這樣：

document.getElementById("content").innerText = "<p>hello there</p>";

console.log(document.body.outerHTML);
// <body>
//     <div id="content">&lt;p&gt;hello there&lt;/p&gt;</div>
//     <script src="testingjs.js"></script>
// </body>

利用這一點能夠用這個屬性去掉全部的html標籤，以下：

document.getElementById("content").innerText = document.getElementById("content").innerText;

console.log(document.body.outerHTML);
// <body>
//     <div id="content">This is a paragraph with a list following it.<br><br>Item 1<br>Item 2<br>Item 3</div>
//     <script src="testingjs.js"></script>
// </body>

值得注意的是Firefox雖然不支持innerText，但支持textContent屬性。爲了兼容性，應採用下面的代碼：

function getInnerText(element) {
    if (typeof element.textContent == "string") {
        return element.textContent;
    } else {
        return element.innerText;
    }
}
function setInnerText(element, text) {
    if (typeof element.textContent == "string") {
        element.textContent = text;
    } else {
        element.innerText = text;
    }
}

`outerText`屬性（儘可能不要用）

與innerText屬性的區別：

var div = document.getElementById("content");
div.innerText = "hello there";
console.log(document.body.innerHTML); //<div id="content">hello there</div>

var div = document.getElementById("content");
div.outerText = "hello there";
console.log(document.body.innerHTML); //hello there

由於這個屬性會致使調用它的元素不存在，所以這個屬性並不經常使用

滾動

主要有如下幾個方法：

scrollIntoView()：true的話儘可能顯示在頂端，false的話則是底部；
scrollIntoViewIfNeeded(alignCenter)：若是爲true，則表示儘可能將元素顯示在視口中部；
scrollBy(xnum,ynum)：xnum 必需，把文檔向右滾動的像素數；ynum必需，把文檔向下滾動的像素數。

另外，scrollByLinew(lineCount)以及scrollByPages(pageCount)這兩個方法，在chrome測試了一下，並沒有反應。不知是否兼容問題。

下面是document得到焦點的時候，自動以每10毫秒的速度往下滾屏：

var x = setTimeout(focus, 10);
function focus() {
    if (document.hasFocus()) {
        window.scrollBy(0,1);
    }
var y = setTimeout(focus, 10);
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

JavaScript DOM擴展——「專有擴展」的注意要點

文檔模式

children屬性

contains()方法和compareDocumentPosition()方法

插入文本

innerText屬性

outerText屬性（儘可能不要用）

滾動

`children`屬性

`contains()`方法和`compareDocumentPosition()`方法

`innerText`屬性

`outerText`屬性（儘可能不要用）