DOM相對應Html5的擴展

一.選擇符API

1. querySelector()方法 ：接收一個CSS選擇符 ，返回與該模式匹配的第一個元素，若沒有匹配到返回null。

其中通過Document類型調用querySelector()方法時，會在文檔元素範圍內查找匹配元素；

如var body = document.querySelector("body");

通過Element類型調用querySelector()時，只會在該元素後代元素的範圍內查找匹配元素

如var img = document.body.querySelector("img.button");

2. querySelectorAll()方法 ：接收一個CSS選擇符 ，返回與該模式匹配的所有元素，返回一個Nodelist實例（類Array）若沒有匹配到返回null。

所以可以使用Array的一些熟悉如item() [] length

3. matchesSelector()方法：接收一個css選擇符，如果調用元素與該選擇符匹配，返回true。否則返回false.

二.元素遍歷

對於元素間的空格，IE9及之前版本不會返回文本節點，而其他所有瀏覽器都會返回文本節點點。這樣會導致用DOM0時使用childNodes和firstChild等熟悉時的行為不一致。為了彌補這一差異 Element Traversal API 為DOM元素添加了一下5個屬性：

childElementCount: 返回子元素的個數(不包括文本節點和註釋）

firstElementChild: 指向第一個子元素 （firstchild的元素版）

lastElementChild: 指向最後一個子元素 （lastchild的元素版）

previousElementSibling:指向前一個同輩元素

nextElementSibling:指向後一個同輩元素

三.HTML5與JavaScript的擴充

1.getElementsByClassName()方法：接收一個參數包含一個或多個類名字符串（類名的先後順序不重要）返回帶有指定類的所有元素的NodeList。

好處：方便地為帶有某些類的元素添加事件處理程序，從而不必再局限於使用ID或標簽名

2.HTML5新增了classList屬性 來操作類名的。 add（value）：將指定的字符串添加到列表中。如果值已經存在，就不添加了

contain（value）表示列表中是否存在給定的值，如果存在則返回true ；remove（value）從列表中刪除給定的字符串；

toggle（value） 如果列表中已經存在給定的值，刪除它，如果列表中沒有給定的值則添加它。

註：有了classList屬性，除非你需要全部刪除所有類名，或者完全重寫元素的class屬性，否則就用不到className屬性了

目前支持classList屬性的瀏覽器有Firefox3.6+ 和chrome

3.焦點的管理

首先是document.activeElement屬性 獲得焦點是document.activeElement屬性的值為true 默認情況下文檔剛剛加載完成時，

document.activeElement中保存的是document.body元素的引用。文檔加載期間，document.ativeElement的值為null.

然後是document.hasFocus()方法 用於確定文檔是否獲得了焦點

目前實現這兩種屬性的瀏覽器包括IE4+ firefox3+ safari4+ chrome 和Opera8+

4.在HTML5中HTMLDocumenet的變化

1.document.readyState屬性用於保存兩個可能的值一是loading 正在加載文檔 二是complete已經加載完文檔

以前實現這兩種屬性的瀏覽器包括IE4+ firefox3.6+ safari chrome 和Opera9+但現在HTML5納入了標準

2.document.compatMode的值 在標準模式下是CSS1Compat 在混雜模式是BackCompat

以前實現這兩種屬性的瀏覽器包括IE6+ firefox safari3.1+ chrome 和Opera但現在HTML5納入了標準

3.document.head屬性 它與document.getElementByTagName("head")[0]是一樣的

可使用 var head = document.head || document.getElementByTagName("head")[0] 來實現兼容

4.document.charset HTML5中默認使用的是“UTF-16” 可使用這個屬性來進行設置成"UTF-8"

document.defaultCharset屬性默認的字符集

支持document.charset 屬性的瀏覽器有IE、firefox safari opera chrome

支持document.defaultCharset屬性的瀏覽器有IE safari chrome

5.如果需要給元素添加一些不可見的數據以便進行其他處理，那就要用自定義數據屬性。在跟蹤鏈接或混搭應用中，通過自定義數據屬性能便

地知道點擊來自頁面中的哪個部分 在HTML5中使用創建自定義屬性是前面要加一個前綴

目前支持自定義數據屬性的瀏覽器有Firefox6+ 和chrome

6.innerHTML屬性返回與調用元素的所有子節點對應的HTML標記（包括元素、註釋和文本節點） 使用innerHTML屬性有些限制：一是通過

innerHTML插入<script>元素並不會執行其中的腳本（讀模式和寫模式的概念與差別還不清楚）

outerHTML屬性返回調用它的元素及所有子節點的HTML標簽；它顯示的內容還包括最為一層的標簽

支持outerHTML屬性的瀏覽器有IE4+ safari4+ chrome 和Opera8+ firefox8+

insertAdjacentHTML()方法，它是插入標記的新增方式；接收兩個參數：插入位置和要插入的HTML文本

第一個參數有4個選項且必須是小寫 ：一是beforebegin：在當前元素之前插入一個緊鄰的同輩元素 ；二是afterbegin，在當前元素之下插

入一個新的子元素或者在第一個子元素之前再插入新的子元素；三是beforeend：在當前元素之下插入一個新的子元素或者在最後一個子元

素之後再插入新的子元素； 四是afterend，在當前元素之後插入一個緊鄰的同輩元素。

如element.insertAdjcentHTML("afterend","<p> hello world !</p>") //作為後一個同輩元素插入

7.HTML5標準scrollIntoview()控制頁面滾動 它可以再所有HTML元素上調用，通過滾動瀏覽器窗口或某個容器元素，調用元素就可以出現在

視口中

四.專有擴展

1.document.documentMode用於返回IE當前的文檔模式。

2.element.children屬性與elementchildNodes沒有區別，都表示一個節點的子節點數組

3.document.documentElement.contains()通過它可以判斷某個節點是不是另一個節點的後代。

HTML5 DOM擴展