盡管DOM作為API已經(jīng)十分完善了汰蓉，但是為了更多的功能甲棍，仍然會(huì)有一些專有的擴(kuò)展喜喂。
選擇符API
為了讓讓瀏覽器原生支持 CSS 查詢，選擇符API提供了兩個(gè)主要的方法：querySelector()和querySelectorAll()婴氮，可以通過Document和Element類去調(diào)用。支持的瀏覽器有：IE8+,FireFox3.5,Safari3.1+,Chrome和Opera10+
-
querySelector()
1.該方法接收一個(gè) CSS 選擇符盾致，返回與該模式匹配的第一個(gè)元素主经，如果沒有找到匹配的元素，返回null庭惜。
var myDiv = document.querySelector('#myDiv'); //選擇了id為myDiv的第一個(gè)元素
var img = document.body.querySelector('.button'); //在body中class為button的第一個(gè)元素
-
querySelectorAll()
這個(gè)方法返回的是一個(gè)NodeList的實(shí)例罩驻，實(shí)際上是帶有所有屬性和方法的NodeList。
var myDiv = document.querySelector('#myDiv'); //選擇了id為myDiv的元素
var img = document.body.querySelector('.button'); //在body中class為button的元素的nodeList
-
matchesSelector()
Selectors API Level 2 規(guī)范為Element類型新增了一個(gè)方法matchesSelector()护赊。這個(gè)方法接收一個(gè) CSS 選擇符惠遏，如果調(diào)用元素與該選擇符匹配，返回true骏啰；否則节吮，返回false。
if (document.body.matchesSelector("body.page1")) {
//true
}
元素遍歷
對(duì)于元素間的空格判耕，IE9 及之前的版本不會(huì)返回文本節(jié)點(diǎn)透绩，而其他瀏覽器都會(huì)返回文本節(jié)點(diǎn)，因此導(dǎo)致了在使用 childNodes 和 fristChild 等屬性時(shí)的行為不一致壁熄。為了彌補(bǔ)差異帚豪，Emelent Traversal 規(guī)范定義了一組新屬性：
1.childElementCount: 返回子元素（不包括文本節(jié)點(diǎn)和注釋）的個(gè)數(shù)。
2.firstElementChild: 指向第一個(gè)子元素草丧；firstChild 的元素版狸臣。
3.lastElementChild: 指向最后一個(gè)子元素；lastChild 的元素版昌执。
4.previousElementSibling: 指向前一個(gè)同輩元素烛亦；previousSibling 的元素版。
5.nextElementSibling: 指向后一個(gè)同輩元素仙蚜；nextSibling 的元素版此洲。
//現(xiàn)在可以這樣遍歷元素的子元素
var i;
var len;
var child = element.firstElementChild;
while(child != element.lastElementChild) {
processChild(child); //已知其是元素
child = child.nextElementSibling;
}
HTML5相關(guān)的擴(kuò)展
- 類相關(guān)的擴(kuò)充
1.getElementsByClassName()：該方法接收一個(gè)參數(shù)，即一個(gè)包含一或多個(gè)類名的字符串委粉，返回帶有指定類型的所有元素的NodeList呜师。支持的瀏覽器是：IE9+,Firefox3+，Safari3.1+,Chrome和Opera9.5+贾节；
var allCurrentUsernames = document.getElementsByClassName("username current");
//返回class同時(shí)為a和b的元素
2.classList:獲取元素的class汁汗，返回一個(gè)DOMTokenList的實(shí)例衷畦，length屬性代表長(zhǎng)度，item()和方括號(hào)引用知牌；而且還添加了如下方法：add(),contain(),remove(),toggle()
支持的瀏覽器只有：Firefox3.6+和Chorme
//刪除類
div.classList.remove('user');
//添加類
div.classList.add('current');
//切換類
div.classList.toggle('user');
//確定元素中是否包含類
if(div.classList.contains('bd') && !div.classList.contains('disabled')) {
}
迭代類名
for (var i =0,len=div.classList.length;i < len; i++) {
doSomething(div.classList[i]);
}
-
焦點(diǎn)管理
HTML5 也添加了輔助管理 DOM 焦點(diǎn)的功能祈争。首先就是document.activeElement屬性，這個(gè)屬性始終會(huì)引用 DOM 中當(dāng)前獲得了焦點(diǎn)的元素角寸。支持的瀏覽器是：IE4+,Firefox3+菩混，Safari4+,Chrome和Opera8+；
1.默認(rèn)情況下扁藕，文檔剛加載完成時(shí)沮峡，document.activeElement中保存的是document.body元素的引用。
2.文檔加載期間亿柑，document.activeElement的值為null邢疙。
3.另外新增了document.hasFocus()方法，這個(gè)方法用于確定文檔是否獲得了焦點(diǎn)望薄。 -
HTMLDocument的變化
HTML5頁(yè)擴(kuò)展了HTMLDocument疟游，增加了新的功能。
1.readyState 屬性痕支，表示文檔的加載狀態(tài)颁虐。支持的瀏覽器是：IE4+,Firefox3.6+，Safari,Chrome和Opera9+采转；
2.document.compatMode聪廉，在標(biāo)準(zhǔn)模式下，值等于CSS1Compat故慈，而在混雜模式下板熊，值等于BackCompat。
if (document.readyState == 'complete') {
//文檔加載完畢察绷，執(zhí)行操作
}
//兼容操作
var head = document.head || document.getElementsByTagName('head')[0];
3.document.head屬性干签，引用文檔的<head>元素。支持的瀏覽器：Safari5,Chrome
字符集屬性
HTML5也新增了幾個(gè)與文本相關(guān)的字符集拆撼。
1.charset屬性表示文檔中實(shí)際使用的字符集容劳，也可以用來指定新字符集。默認(rèn)值為UTF-16闸度。
2.defaultCharset竭贩，表示根據(jù)默認(rèn)瀏覽器及操作系統(tǒng)的設(shè)置，當(dāng)前文檔默認(rèn)的字符集應(yīng)該是什么莺禁。自定義數(shù)據(jù)屬性
插入標(biāo)記
1.innerHTML 屬性返回與調(diào)用元素的所有子節(jié)點(diǎn)對(duì)應(yīng)的 HTML 標(biāo)記留量。在寫模式下，innerHTML會(huì)根據(jù)指定的值創(chuàng)建新的 DOM 樹，然后用這個(gè) DOM 樹完全替換調(diào)用元素原先的所有子節(jié)點(diǎn)楼熄。
2.outerHTML 屬性在讀模式下忆绰，該屬性返回所有調(diào)用它的元素及所有子節(jié)點(diǎn)的 HTML 標(biāo)簽。再寫模式下可岂，會(huì)根據(jù)指定的 HTML 字符串創(chuàng)建新的 DOM 子樹错敢，然后用這個(gè) DOM 子樹完全替換調(diào)用元素。
3.insertAdjacentHTML() 方法接收兩個(gè)參數(shù)缕粹，插入位置和要插入的 HTML 文本稚茅。
div.innerHTML = 'hello world!';
div.innerHTML = "hello,<b>\""reader\""!</b>";
-
scrollIntoView() 方法
該方法可以在所有 HTML 元素上調(diào)用，通過滾動(dòng)瀏覽器窗口或某個(gè)容器元素致开，調(diào)用元素就會(huì)出現(xiàn)在視口中峰锁。如果給這個(gè)方法傳入true作為參數(shù)，或不傳入任何參數(shù)双戳，那么窗口滾動(dòng)之后會(huì)讓調(diào)用元素的頂部與視口頂部盡可能平齊。如傳入false作為參數(shù)糜芳，調(diào)用參數(shù)會(huì)盡可能全部出現(xiàn)在視口中飒货，可能的話，調(diào)用元的底部會(huì)與視口頂部平齊峭竣。
document.forms[0].scrollIntoView();
專有擴(kuò)展
-
文檔模式
IE8引進(jìn)了一個(gè)新的概念叫做“文檔模式”塘辅。頁(yè)面的文檔模式?jīng)Q定了可以使用什么功能。換句話說皆撩，文檔模式?jīng)Q定了你可以使用哪個(gè)級(jí)別的css扣墩，可以在JavaScript中使用那些api，以及如何對(duì)待文檔模式（doctype）扛吞。
要強(qiáng)制瀏覽器以某種模式渲染頁(yè)面呻惕，可以使用 HTTP 頭部信息X-UA-Compatible，或通過等價(jià)的<meta>標(biāo)簽來設(shè)置：
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
-
children 屬性
該屬性是HTMLCollection的實(shí)例滥比，只包含元素中同樣還是元素的子節(jié)點(diǎn)亚脆。支持的瀏覽器是：IE5,Firefox3.5+，Safari2（有bug）,Safari3盲泛，Chrome和Opera8濒持；
var childCount = element.children.length;
var firstChild = element.children[0];
-
contains() 方法
檢測(cè)是否存在某個(gè)的后代節(jié)點(diǎn)。支持的瀏覽器是：IE寺滚，F(xiàn)irefox9.5+柑营，Safari，Chrome和Opera9+村视；
alert(document.documentElement.contains(document.body)); //true
-
插入文本
這兩個(gè)沒有被 HTML5 看中的屬性是innerText和outerText官套。 - 滾動(dòng)
