摘要：級(jí)遍歷和范圍模塊定義了兩個(gè)用于輔助完成順序遍歷結(jié)構(gòu)的類型和這兩個(gè)類型能夠基于給定的起點(diǎn)對(duì)結(jié)構(gòu)執(zhí)行深度優(yōu)先的遍歷操作。其中的屬性，表示任何遍歷方法在上一次遍歷中返回的接待你。通過(guò)設(shè)置這個(gè)屬性也可以修改遍歷繼續(xù)進(jìn)行的節(jié)點(diǎn)。

“DOM2級(jí)遍歷和范圍”模塊定義了兩個(gè)用于輔助完成順序遍歷DOM結(jié)構(gòu)的類型：NodeIterator和TreeWalker；這兩個(gè)類型能夠基于給定的起點(diǎn)對(duì)DOM結(jié)構(gòu)執(zhí)行深度優(yōu)先的遍歷操作。

root：想要作為搜索起點(diǎn)的樹中的節(jié)點(diǎn)；

whatToShow：表示要訪問(wèn)哪些節(jié)點(diǎn)的數(shù)字代碼；

filter：是一個(gè)NodeFilter對(duì)象，或者一個(gè)函數(shù)（表示應(yīng)該接受還是拒絕某種特定節(jié)點(diǎn)的函數(shù)）；

entityReferenceExpansion：布爾值，表示是否擴(kuò)展實(shí)體引用。在HTML頁(yè)面中沒用；

NodeFilter.SHOW_ALL：所有類型節(jié)點(diǎn)；

NodeFilter.SHOW_ELEMENT：元素；

NodeFilter.SHOW_ATTRIBUTE：特性；

NodeFilter.SHOW_TEXT：文本；

NodeFilter.SHOW_COMMENT;

NodeFilter.SHOW_DOCUMENT;

NodeFilter.SHOW_DOCUMENT_TYPE;

另外還有對(duì)HTML頁(yè)面沒用的幾個(gè)：

NodeFilter.SHOW_CDATA_SECTION;

NodeFilter.SHOW_ENTITY_REFERENCE：實(shí)體引用節(jié)點(diǎn)；

NodeFilter.SHOW_ENTITY：實(shí)體節(jié)點(diǎn)；

NodeFilter.SHOW_PROCESSING_INSTRUCTION：處理指令節(jié)點(diǎn)；

NodeFilter.SHOW_DOCUMENT_FRAGMENT；

NodeFilter.SHOW_NOTATION：符號(hào)節(jié)點(diǎn)

可以用按位或操作符來(lái)組合多個(gè)選項(xiàng)如：

var whatToShow = NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT;

可以使用createNodeIterator()方法的filter參數(shù)來(lái)指定自定義的NodeFilter對(duì)象，每個(gè)NodeFilter對(duì)象只有一個(gè)方法，應(yīng)該訪問(wèn)的節(jié)點(diǎn)返回NodeFilter.FILTER_ACCEPT;不應(yīng)該訪問(wèn)的節(jié)點(diǎn)返回NodeFilter.FILTER_SKIP；

可以創(chuàng)建包含acceptNode()方法的對(duì)象：

var filter = {
    acceptNode: function(node) {
        return node.nodeName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
};

也可以創(chuàng)建一個(gè)與acceptNode()方法類似的函數(shù)：

var filter = function(node) {
    return node.nodeName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}

如果不指定過(guò)濾器，那么應(yīng)該傳入null。

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ELEMENT, null);
var node = iterator.nextNode();
console.log(node); //HTMLBodyElement

var filter = {
    acceptNode: function(node) {
        return node.nodeName.toLowerCase() == "p" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
    }
};
var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, filter);
var node = iterator.nextNode();
console.log(node); //HTMLParagraphElement

var filter = function(node) {
    return node.nodeName.toLowerCase() == "h1" ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
}
var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, filter);
var node = iterator.nextNode();
console.log(node); //HTMLHeadingElement

前者用于向前前進(jìn)一步；后者用于向后后退一步。當(dāng)遍歷到DOM子樹的最后一個(gè)節(jié)點(diǎn)時(shí)，nextNode()返回null；當(dāng)遍歷到DOM子樹的最后一個(gè)節(jié)點(diǎn)，且previousNode()返回根節(jié)點(diǎn)以后，再次調(diào)用它就會(huì)返回null。

以下面的html代碼為例：

    
Hello world!
    

        
List item 1
        
List item 2
        
List item 3
    

var div = document.getElementById("div1");
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = iterator.nextNode();
while(node !== null){
    console.log(node.nodeName); //輸出標(biāo)簽名
    node = iterator.nextNode();
}
// [L] repetition.html:24 DIV 
// [L] repetition.html:24 P 
// [L] repetition.html:24 B 
// [L] repetition.html:24 UL 
// [L] repetition.html:24 LI 
// [L] repetition.html:24 LI 
// [L] repetition.html:24 LI 

var div = document.getElementById("div1");
var filter = function(node) {
    if (node.nodeName.toLowerCase() == "li") {
        return NodeFilter.FILTER_ACCEPT;
    } else {
        return NodeFilter.FILTER_SKIP;
    }
};
var iterator = document.createNodeIterator(div, NodeFilter.SHOW_ELEMENT, filter, false);
var node = iterator.nextNode();
while (node !== null) {
    console.log(node.firstChild.nodeValue);
    node = iterator.nextNode();
}
// [L] repetition.html:31 List item 1 
// [L] repetition.html:31 List item 2 
// [L] repetition.html:31 List item 3 

這個(gè)類型比上面那個(gè)更高級(jí)，除了包括nextNode()和previousNode()在內(nèi)的相同的功能之外，這個(gè)類型還提供了下列用于在不同方向上遍歷DOM結(jié)構(gòu)的方法。如：

parentNode()：遍歷到當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)；

firstChild()：...第一個(gè)子節(jié)點(diǎn)；

lastChild()：...最后一個(gè)子節(jié)點(diǎn)；

nextSibling()：...當(dāng)前節(jié)點(diǎn)的下一個(gè)同輩節(jié)點(diǎn)；

previousSibling()：...當(dāng)前節(jié)點(diǎn)的上一個(gè)同輩節(jié)點(diǎn)；

該方法用于創(chuàng)建TreeWalker對(duì)象，document.createTreeWalker()方法接收4個(gè)參數(shù)，與document.createNodeIterator()方法一致。其中的currentNode屬性，表示任何遍歷方法在上一次遍歷中返回的接待你。通過(guò)設(shè)置這個(gè)屬性也可以修改遍歷繼續(xù)進(jìn)行的節(jié)點(diǎn)。如：

var div = document.getElementById("div1");
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = walker.currentNode; //currentNode返回當(dāng)前節(jié)點(diǎn) Div
console.log(node.nodeName); //DIV
walker.currentNode = document.getElementsByTagName("li")[0];
node = walker.currentNode;
console.log(node.firstChild.nodeValue); //List item 1
var secLiElem = walker.nextSibling();
console.log(secLiElem.firstChild.nodeValue); //List item 2

以下面的html代碼為例：

    
Hello world!
    

        
List item 1
        
List item 2
        
List item 3
    

var div = document.getElementById("div1");
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = walker.nextNode();
while(node !== null){
    console.log(node.nodeName);
    node = walker.nextNode();
}
// [L] repetition.html:24 P 
// [L] repetition.html:24 B 
// [L] repetition.html:24 UL 
// [L] repetition.html:24 LI 
// [L] repetition.html:24 LI 
// [L] repetition.html:24 LI 

var div = document.getElementById("div1");
var walker = document.createTreeWalker(div, NodeFilter.SHOW_ELEMENT, null, false);
var node = walker.currentNode; //currentNode返回當(dāng)前節(jié)點(diǎn) Div
walker.firstChild(); //轉(zhuǎn)到p
walker.nextSibling(); //轉(zhuǎn)到ul
node = walker.firstChild(); //轉(zhuǎn)到li
while(node !== null){
    console.log(node.firstChild.nodeValue);
    node = walker.nextNode();
}
// [L] repetition.html:27 List item 1 
// [L] repetition.html:27 List item 2 
// [L] repetition.html:27 List item 3 

由于IE中沒有對(duì)應(yīng)的類型和方法，所以使用遍歷的夸瀏覽器解決方案非常少見。