DOM擴展：DOM API的進一步增強[總結篇-上]

DOM1級主要定義了文檔的底層結構，並提供了基本的查詢操作的API，總體而言這些API已經比較完善，我們可以通過這些API完成大部分的DOM操作。然而，為了擴展DOM API的功能，同時進一步提高DOM操作的效率，DOM擴展也不斷被提出和採納。對DOM的擴展主要有兩部分：Selectors API和HTML5，另外還有一個Element Traversal規範，主要用於元素遍歷，另外還有一些專有擴展。

function traversal(element){
var childNodes = element.childNodes,i = 0, len = childNodes.length, item;
for(; i < len ; i++){
item = childNodes.item([i]);
if(item.nodeType === 1){
console.log(item.nodeName + ":" + item.innerHTML);
        }
    }
}

演變為：

function traversalNewVersion(element){
var len = element.childElementCount, child = element.firstElementChild;
while(true){
console.log(child.nodeName + ":" + child.innerHTML);
if(child === element.lastElementChild){
break;
        }
child = child.nextElementSibling;
    }
}

註：IE9+,Firefox3.5+,chrome,Opera10+,Safari4+支持Element Traversal API

<p class="red strong">我是第一個段落</p>
<p class="green strong bigger">我是較大的段落</p>

var paragraphs = document.getElementsByClassName("strong red");

註：IE4+,Firefox3+,chrome,Opera8+,Safari4+支持這兩個屬性

3.3 HTMLDocument的變化

註：IE4+,Firefox3.6+,chrome,Opera9+,Safari支持這兩個屬性

3.4 字元集屬性

3.5 自定義屬性

var div = document.getElementById("div");
var data = div.dataset;
console.log(data.author);

輸出的結果就是：劉木林

alert(div.getAttribute("data-author"));