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

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

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

SelectorAPI（選擇符API）

HTML5

Element Traversal（元素遍歷）

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

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

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

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

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

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

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

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

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

各個(gè)瀏覽器對matchesSelector()方法只有一些實(shí)驗(yàn)性地實(shí)現(xiàn)，若想使用該方法，最好是編寫一個(gè)包裝函數(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及之前版本不會(huì)返回文本節(jié)點(diǎn)，而其他所有瀏覽器都會(huì)返回文本節(jié)點(diǎn)），導(dǎo)致childNodes和firstChild等屬性返回的結(jié)果不一致。為了解決這一問題，Element Traversal規(guī)范為DOM元素新定義了5個(gè)屬性：

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

firstElementChild：指向第一個(gè)子元素

lastElementChild：指向最后一個(gè)子元素

previousElementSibling：指向前一個(gè)同輩元素

nextElementSibling：指向后一個(gè)同輩元素

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焦點(diǎn)的功能

1 document.activeElement屬性

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

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

2 document.hasFocus()方法

該方法用于確定文檔是否獲得了焦點(diǎn)

1 readyState屬性

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

該屬性由兩個(gè)取值：

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屬性可以獲得元素

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

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

1 charset屬性

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

默認(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、何時(shí)應(yīng)用自定義數(shù)據(jù)屬性？
當(dāng)給元素添加一些不可見的數(shù)據(jù)以便進(jìn)行其他處理，就會(huì)用到自定義數(shù)據(jù)屬性。在跟蹤鏈接或混搭應(yīng)用中，通過自定義數(shù)據(jù)屬性能方便地知道點(diǎn)擊來自頁面的哪個(gè)部分。
3、每個(gè)自定義數(shù)據(jù)屬性，都要為其添加前綴data-

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

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

1 innerHTML屬性

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

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

2 outerHTML屬性

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

3 insertAdjacentHTML()方法

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

插入位置必須是下列四個(gè)值之一：

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

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

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

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

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

document.documentMode

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

檢測某節(jié)點(diǎn)是不是另一個(gè)節(jié)點(diǎn)的后代

1 innerText屬性
2 outerText屬性