摘要：擴展為了實現(xiàn)更多的功能，會有一些標(biāo)準(zhǔn)或?qū)Ｓ械臄U展。標(biāo)準(zhǔn)擴展主要有選擇符元素遍歷一選擇符選擇符能夠允許代碼直接根據(jù)選擇符選擇與某個模式匹配的元素。

為了實現(xiàn)更多的功能，會有一些標(biāo)準(zhǔn)或?qū)Ｓ械腄OM擴展。

標(biāo)準(zhǔn)擴展主要有：

SelectorAPI（選擇符API）

HTML5

Element Traversal（元素遍歷）

選擇符API能夠允許JS代碼直接根據(jù)CSS選擇符選擇與某個模式匹配的DOM元素。

Selector API Level1有兩個核心方法：querySelector()、querySelectorAll()，在兼容的瀏覽器中，Document及Element類型的實例可以調(diào)用它們。

Selector API Level2為Element類型新增了一個方法：matchesSelector()。

語法：querySelector(CSS選擇符)：返回與該CSS選擇符匹配的第一個元素，若無匹配元素，則返回null

實例：
//取得body元素
var body = document.querySelector("body");
//取得ID為"myDiv"的元素
var myDiv = document.querySelector("#myDiv");

注釋：
Document類型調(diào)用querySelector()方法，會在文檔元素的范圍內(nèi)查找匹配的元素
Element類型調(diào)用querySelector()方法，只會在該元素后代元素的范圍內(nèi)查找匹配的元素

語法：querySlectorAll(css選擇符)：返回所有匹配的元素，這些元素以NodeLise形式存在

要取得NodeList中的元素，可以使用item()方法或者使用方括號語法

語法：matchesSelector(CSS選擇符)，如果調(diào)用元素與該選擇符匹配，返回true；否則，返回false

各個瀏覽器對matchesSelector()方法只有一些實驗性地實現(xiàn)，若想使用該方法，最好是編寫一個包裝函數(shù)：

function matchesSelector(element,selector){

if(element.matchesSelector){
    return element.matchesSelector(selector);
}
// IE9+
else if(element.msMatchesSelector){
    return element.msMatchesSelector(selector);
}
//Firefox 3.6+
else if(element.mozMatchesSelector){
    return element.mozMatchesSelector(selector);
}
//safari5+、chrome
else if(element.webkitMatchesSelector){
    return element.webkitMatchesSelector(selector);
}
else{
    throw new Error("Not supported.");
}

}

對于元素間的空格，不同瀏覽器的理解不同（IE9及之前版本不會返回文本節(jié)點，而其他所有瀏覽器都會返回文本節(jié)點），導(dǎo)致childNodes和firstChild等屬性返回的結(jié)果不一致。為了解決這一問題，Element Traversal規(guī)范為DOM元素新定義了5個屬性：

childElementCount：返回子元素的個數(shù)（不包括文本節(jié)點和注釋）

firstElementChild：指向第一個子元素

lastElementChild：指向最后一個子元素

previousElementSibling：指向前一個同輩元素

nextElementSibling：指向后一個同輩元素

HTML4使得class屬性用得越來越多，為了讓開發(fā)人員簡化對css類的用法，HTML5新增了很多API

1 getElementsByClassName()

該方法即可以被Document類型調(diào)用，又可以被Element類型調(diào)用，返回的是NodeList對象

2 classList屬性

在HTML5之前，想要操作類名，需要使用className屬性。為了簡化操作類名的方式，HTML5為所有元素新增了classList屬性，classList屬性還定義了如下方法：

add(value)：將value添加到類名列表中，若該值已經(jīng)存在，就不添加

contains(value)：列表中如果存在value值，則返回true；否則返回false

remove(value)：從列表中刪除給定的類名

toggle(value)：若列表中存在給定的類名，則刪除它；若列表中沒有給定的值，添加它

支持classList屬性的瀏覽器有FireFox3.6+和Chrome

HTML5新增了輔助管理DOM焦點的功能

1 document.activeElement屬性

該屬性指向DOM中當(dāng)前獲得焦點的元素（元素獲得焦點的方式：頁面加載、用戶輸入、代碼中調(diào)用focus()方法）

默認(rèn)情況，文檔剛加載完成時，document.activeElement中保存的是document.body元素；文檔加載期間，document.activeElement的值為null

2 document.hasFocus()方法

該方法用于確定文檔是否獲得了焦點

1 readyState屬性

作用：該屬性用來指示文檔是否加載完成

該屬性由兩個取值：

loading：正在加載文檔

complete：已經(jīng)加載完文檔

用法：用它來作為文檔加載完成的指示器

if(document.readyState = "complete"){

   //執(zhí)行操作

}

2 compatMode屬性

頁面有兩種模式：標(biāo)準(zhǔn)模式和混雜模式，因此檢測頁面的模式就成為瀏覽器的必要功能。

通過使用compatMode屬性開發(fā)人員可以知道瀏覽器采用了哪種模式：

標(biāo)準(zhǔn)模式：document.compatMode = "CSS1Compat"

混雜模式：document.compatMode = "BackCompat"

3 head屬性

document.head屬性可以獲得元素

實現(xiàn)document.head屬性的瀏覽器有chrome和Safari5

若需要引用元素，可以使用以下方法兼容所有的瀏覽器：
var head = document.head || document.getElementsByTagName("head")[0];

1 charset屬性

含義：表示文檔中實際使用的字符集，也可以用來指定新的字符集。

默認(rèn)情況下，document.charset = "UTF-16"

支持該屬性的瀏覽器有：IE、Firefox、Safari、Opera、Chrome

2 defaultCharset屬性

含義：當(dāng)前文檔的默認(rèn)字符集

支持該屬性的瀏覽器有：IE、Safari、Chrome

1、 HTML5規(guī)定可以為元素添加非標(biāo)準(zhǔn)的屬性，以此為元素提供與渲染無關(guān)的信息，或者提供語義信息
2、何時應(yīng)用自定義數(shù)據(jù)屬性？
當(dāng)給元素添加一些不可見的數(shù)據(jù)以便進(jìn)行其他處理，就會用到自定義數(shù)據(jù)屬性。在跟蹤鏈接或混搭應(yīng)用中，通過自定義數(shù)據(jù)屬性能方便地知道點擊來自頁面的哪個部分。
3、每個自定義數(shù)據(jù)屬性，都要為其添加前綴data-

4、dataset屬性可以訪問自定義屬性的值

//訪問上述div元素的自定義屬性  
var div = document.getElementById("myDiv");  
var appId = div.dataset.appId;  // 訪問自定義屬性值時，屬性名前不必加data-前綴

1 innerHTML屬性

在讀模式下，innerHTML屬性返回調(diào)用元素的所有子節(jié)點HTML標(biāo)記
在寫模式下，innerHTML屬性會根據(jù)指定的值創(chuàng)建新的DOM樹，然后用新DOM樹替換調(diào)用元素原先的所有子節(jié)點

在讀模式下，不同的瀏覽器返回的結(jié)果不同

2 outerHTML屬性

在讀模式下，outerHTML返回調(diào)用它的元素及所有子節(jié)點的HTML標(biāo)簽
在寫模式下，outerHTML會根據(jù)指定的HTML字符串創(chuàng)建新的DOM子樹，然后用這個DOM子樹完全替換調(diào)用元素

3 insertAdjacentHTML()方法

語法：insertAdjacentHTML(插入位置，要插入的HTML文本)

插入位置必須是下列四個值之一：

"beforebegin"，在當(dāng)前元素之前插入一個緊鄰的同輩元素

"afterend"，在當(dāng)前元素之后插入一個緊鄰的同輩元素

"afterbegin"，給當(dāng)前元素插入第一個子元素（不管當(dāng)前元素是否有無子元素）

"beforeend"，給當(dāng)前元素插入最后一個子元素（不管當(dāng)前元素是否有無子元素）

所有HTML元素均可調(diào)用該方法，通過滾動瀏覽器窗口或某個容器元素，調(diào)用元素就可以出現(xiàn)在視口中。
該方法參數(shù)的取值有兩種可能：
true：窗口滾動之后會讓調(diào)用元素的頂部與視口頂部盡可能平齊（不傳入?yún)?shù)時也會出現(xiàn)這種效果）
false：調(diào)用元素會盡可能全部出現(xiàn)在視口中，調(diào)用元素的底部會與視口頂部平齊。

document.documentMode

返回調(diào)用元素的元素子節(jié)點

檢測某節(jié)點是不是另一個節(jié)點的后代

1 innerText屬性
2 outerText屬性