DOM 中 TreeWalker 對(duì)象的介紹（翻譯）

原文地址：http://www.javascriptkit.com/dhtmltutors/treewalker.shtml

TreeWalker對(duì)象是DOM2中提供的一個(gè)強(qiáng)大的工具，可以用來(lái)過(guò)濾文檔中的節(jié)點(diǎn)，以便于產(chǎn)生自定義的節(jié)點(diǎn)集合。這聽(tīng)起來(lái)沒(méi)有什么太大的用處，但是如果你需要處理諸如遍歷DOM樹(shù)這樣的問(wèn)題時(shí)，了解一下TreeWalker對(duì)象會(huì)帶來(lái)很大的幫助。你可能已經(jīng)很熟悉如何在Web頁(yè)面中查找具有某個(gè)CSS樣式名稱的節(jié)點(diǎn)集合，如何在XML文件中查找某個(gè)屬性為特定值的腳本寫(xiě)法。借助TreeWalker，僅需少量的工作也可以完成類似功能。在本文中，我將向你介紹TreeWalker對(duì)象，需要注意的是，TreeWalker對(duì)象已經(jīng)在Firefox/Opera8+中支持，但是IE6、IE7尚不支持。（注：Chrome、Safari這些基于WebKit內(nèi)核的瀏覽器也支持TreeWalker對(duì)象，IE9+也已經(jīng)支持）

另外，和TreeWalker關(guān)系緊密的另外一個(gè)對(duì)象NodeIterator，也會(huì)在本文檔中涵蓋。

document.createTreeWalker()方法

對(duì)于某些人來(lái)說(shuō)，TreeWalker對(duì)象開(kāi)起來(lái)有點(diǎn)兒神秘并且很復(fù)雜。實(shí)際上，要想使用TreeWalker對(duì)象，只需一個(gè)方法：document.createTreeWalker()。此方法有4個(gè)參數(shù)，可以完成大部分的常見(jiàn)需求，例如在文檔中查找某種類型或者具有某個(gè)屬性的節(jié)點(diǎn)。對(duì)于此方法簡(jiǎn)單介紹如下：

document.createTreeWalker(root, nodesToShow, filter, entityExpandBol)

來(lái)了解一下這4個(gè)參數(shù)：

1. root：文檔樹(shù)搜索的起始節(jié)點(diǎn)

2. nodesToShow：TreeWalker對(duì)象要訪問(wèn)的節(jié)點(diǎn)類型

3. filter(or null)：用來(lái)過(guò)濾返回結(jié)果的自定義函數(shù)，null表示不使用自定義的過(guò)濾函數(shù)

4. entityExpandBol：是否展開(kāi)實(shí)體引用

對(duì)于參數(shù)3，有以下可用的常量：

NodeFilter常量

• NodeFilter.SHOW_ALL

• NodeFilter.SHOW_ENTITY_REFERENCE

• NodeFilter.SHOW_DOCUMENT_TYPE

• NodeFilter.SHOW_ELEMENT

• NodeFilter.SHOW_ENTITY

• NodeFilter.SHOW_ENTITY

• NodeFilter.SHOW_ATTRIBUTE

• NodeFilter.SHOW_PROCESSING_INSTRUCTION

• NodeFilter.SHOW_NOTATION

• NodeFilter.SHOW_TEXT

• NodeFilter.SHOW_COMMENT

• NodeFilter.SHOW_CDATA_SECTION

• NodeFilter.SHOW_DOCUMENT

雖然有如此多的常量可以用來(lái)限制TreeWalker返回的節(jié)點(diǎn)，但是在實(shí)際應(yīng)用中，可能常用的也就是其中的少數(shù)幾個(gè)常量。例如：NodeFilter.SHOW_ELEMENT返回所有的節(jié)點(diǎn)。

我們先從一個(gè)最基本的示例開(kāi)始：

<div id="contentarea"><p>Some <span>text</span></p><b>Bold text</b></div><script type="text/javascript">var rootnode=document.getElementById("contentarea");var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_ELEMENT, null, false);</script>

在這個(gè)示例中，createTreeWalker方法的root參數(shù)為ID是contentarea的元素，讓TreeWalker對(duì)象以這個(gè)節(jié)點(diǎn)為根開(kāi)始進(jìn)行遍歷。第二個(gè)參數(shù)限制TreeWalker只遍歷根節(jié)點(diǎn)下的“元素”節(jié)點(diǎn)（例如忽略文本節(jié)點(diǎn)和注釋節(jié)點(diǎn)）。第三個(gè)參數(shù)設(shè)置為null表示不需要引入自定義的過(guò)濾器。第四個(gè)參數(shù)，用來(lái)控制實(shí)體引用是否被展開(kāi)，這里我們?cè)O(shè)置為false。這段代碼執(zhí)行完畢之后，walker對(duì)象指向了包含DIV自己在內(nèi)的以及DIV下的所有子元素節(jié)點(diǎn)（P, SPAN, B）。

TreeWalker的遍歷方法

使用document.createTreeWalker()方法創(chuàng)建了過(guò)濾后的節(jié)點(diǎn)列表，然后可以使用TreeWalker的遍歷方法對(duì)這些節(jié)點(diǎn)進(jìn)行遍歷：

不要把上述的這些方法和屬性和標(biāo)準(zhǔn)DOM元素的方法和屬性混淆，以上的方法只用在TreeWalker對(duì)象中，以實(shí)現(xiàn)遍歷過(guò)濾后的節(jié)點(diǎn)集合的能力。

還是使用上面的示例代碼，這次，我們加入一些代碼來(lái)遍歷TreeWalker返回的節(jié)點(diǎn)列表：

<div id="contentarea"><p>Some <span>text</span></p><b>Bold text</b></div><script type="text/javascript">var rootnode=document.getElementById("contentarea");var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_ELEMENT, null, false);//TreeWalker當(dāng)前指向的節(jié)點(diǎn)，也是它開(kāi)始遍歷的根節(jié)點(diǎn)（root參數(shù)指向的節(jié)點(diǎn)）alert(walker.currentNode.tagName); //alerts DIV (with id=contentarea)//遍歷，顯示所有的子節(jié)點(diǎn)while (walker.nextNode())    alert(walker.currentNode.tagName); //alerts P, SPAN, and B.//重置TreeWalker的指向，讓它指向根節(jié)點(diǎn)walker.currentNode=rootnode 
alert(walker.firstChild().tagName); //alerts P</script>

當(dāng)你使用TreeWalker的遍歷方法時(shí)，TreeWalker不僅依次返回過(guò)濾后的節(jié)點(diǎn)，同時(shí)它還移動(dòng)了當(dāng)前指向節(jié)點(diǎn)的指針，所以，在使用while (walker.nextNode())完成遍歷之后，還要使用walker.currentNode=rootnode重置它的當(dāng)前節(jié)點(diǎn)指向根節(jié)點(diǎn)，以便獲取到第一個(gè)子元素。

再來(lái)一個(gè)示例加深一下對(duì)TreeWalker遍歷的理解：

<p id="essay">George<span> loves </span> <b>JavaScript!</b></p><script type="text/javascript">var rootnode=document.getElementById("essay");var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_TEXT, null, false);
walker.firstChild(); //Walk to first child node (the text "George")var paratext=walker.currentNode.nodeValue;while (walker.nextSibling()){ //Step through each sibling of "George"
    paratext+=walker.currentNode.nodeValue;
}alert(paratext); //alerts "George loves JavaScript!"</script>

在這個(gè)示例中，我們遍歷了根節(jié)點(diǎn)下所有的文本節(jié)點(diǎn)以獲取它完整的文本字符串。

在遍歷TreeWalker的返回結(jié)果時(shí)，你也可以使用標(biāo)準(zhǔn)DOM元素的屬性和方法。因?yàn)門reeWalker的返回值不僅僅返回了過(guò)濾后的節(jié)點(diǎn)，還包括這些節(jié)點(diǎn)在整個(gè)文檔中的關(guān)系。比如下面這個(gè)示例：

<ul id="mylist"><li>List 1</li><li>List 2</li><li>List 3</li></ul><script type="text/javascript">var rootnode=document.getElementById("mylist");var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_ELEMENT, null, false);alert(walker.currentNode.childNodes.length); //alerts 7 (includes text nodes)alert(walker.currentNode.getElementsByTagName("*").length); //alerts 3</script>

這個(gè)示例中，使用TreeWalker查找UL節(jié)點(diǎn)下的所有元素。你可能會(huì)誤以為alert(walker.currentNode.childNodes.length)會(huì)返回3，因?yàn)閁L只有3個(gè)LI子元素。但是實(shí)際上計(jì)算上文本節(jié)點(diǎn)的話，UL元素就包含7個(gè)子元素了，這就是為什么上面的代碼會(huì)返回7。

了解了如何遍歷TreeWalker的返回節(jié)點(diǎn)列表之后，下面將介紹如何自定義過(guò)濾器。還記得document.createTreeWalker()函數(shù)的第三個(gè)參數(shù)嗎？我們將這個(gè)參數(shù)指向一個(gè)自定義的函數(shù)來(lái)完成自定義過(guò)濾器的功能。

在document.createTreeWalker()中使用過(guò)濾器

TreeWalker對(duì)象的本質(zhì)是提供一種在文檔中過(guò)濾節(jié)點(diǎn)的能力。在前面的內(nèi)容中，我們已經(jīng)看到了可以使用NodeFilter的各種常量（例如NodeFilter.SHOW_ELEMENT）來(lái)完成最基本的過(guò)濾功能。但是在實(shí)際的場(chǎng)景中，這些常量可能還不足以支持你完成你的需求。這就需要用到document.createTreeWalker()函數(shù)的第三個(gè)參數(shù)，這個(gè)參數(shù)允許你自定義一個(gè)過(guò)濾函數(shù)來(lái)完成自定義的過(guò)濾，也就是說(shuō)，對(duì)于第二個(gè)參數(shù)所指定的常量產(chǎn)生的結(jié)果再次進(jìn)行過(guò)濾。

document.createTreeWalker(root, nodesToShow, filter, entityExpandBol)

"filter"參數(shù)指向一個(gè)函數(shù)，例如：

var myfilter=function(node){    if (node.tagName=="DIV" || node.tagName=="IMG") //只保留DIV和IMG元素
        return NodeFilter.FILTER_ACCEPT;    else
        return NodeFilter.FILTER_SKIP;
    };var walker=document.createTreeWalker(document.body, NodeFilter.SHOW_ELEMENT, myfilter, false);while (walker.nextNode())
    walker.currentNode.style.display="none"; //隱藏頁(yè)面中所有的DIV和IMG元素

在上面的示例代碼中，我們定義了一個(gè)叫做myfilter的變量，該變量指向一個(gè)函數(shù)，這個(gè)函數(shù)將僅保留DIV和IMG元素，而把其他的元素排除在外。作為過(guò)濾器的函數(shù)只接收一個(gè)參數(shù)，就是TreeWalker在遍歷整個(gè)文檔時(shí)當(dāng)前所指向的節(jié)點(diǎn)。在過(guò)濾器函數(shù)中，你可以使用不同的返回值來(lái)實(shí)現(xiàn)接受、拒絕還是跳過(guò)當(dāng)前的節(jié)點(diǎn)：

• NodeFilter.FILTER_ACCEPT

• NodeFilter.FILTER_REJECT

• NodeFilter.FILTER_SKIP

不言自明，F(xiàn)ILTER_ACCEPT就是表示接受這個(gè)節(jié)點(diǎn)，將其包含到返回的結(jié)果中。但是FILTER_REJECT和FILTER_SKIP的含義可能會(huì)有些不那么明顯了。對(duì)于FILTER_REJECT，TreeWalker將拒絕當(dāng)前節(jié)點(diǎn)以及其所有的后代節(jié)點(diǎn)，也就是說(shuō)，當(dāng)你的過(guò)濾器函數(shù)返回FILTER_REJECT的時(shí)候，TreeWalker將不再遍歷該節(jié)點(diǎn)下的所有后代節(jié)點(diǎn)。如果你需要僅僅過(guò)濾掉當(dāng)前節(jié)點(diǎn)，并且也希望TreeWalker繼續(xù)遍歷該節(jié)點(diǎn)下的所有后代節(jié)點(diǎn)，那么請(qǐng)使用NodeFilter.FILTER_SKIP。例如對(duì)于上面的例子中，如果把 FILTER_SKIP 改為 FILTER_REJECT：

var myfilter=function(node){if (node.tagName=="DIV" || node.tagName=="IMG") //filter out DIV and IMG elements
    return NodeFilter.FILTER_ACCEPT;else
    return NodeFilter.FILTER_REJECT;
};

這樣的會(huì)導(dǎo)致返回的結(jié)果中可能并沒(méi)有包含文檔中全部的DIV和IMG元素，因?yàn)槿绻粋€(gè)IMG元素作為一個(gè)P元素的子元素的話，那么由于P元素被返回了FILTER_REJECT，那么P元素下的IMG元素也不會(huì)被TreeWalker遍歷。

示例：根據(jù)class屬性操作元素

在下面這個(gè)示例中，使用TreeWalker對(duì)象查找文檔中的所有class為blue的元素，并將其class設(shè)置為red：

var getelementbyclass=function(node){if (node.className=="blue") //filter out elements with this class attribute
    return NodeFilter.FILTER_ACCEPT;else
    return NodeFilter.FILTER_SKIP;
};var rootnode=document.body;var walker=document.createTreeWalker(rootnode, NodeFilter.SHOW_ELEMENT, getelementbyclass, false);while (walker.nextNode())
    walker.currentNode.style.color="red";

組合使用NodeFilter常量

在前面的內(nèi)容中我們已經(jīng)了解到NodeFilter提供了很多常量來(lái)讓我們獲取某種類型的節(jié)點(diǎn)，這些常量也可以組合使用，例如：

• OR 操作：NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT

• AND 操作：NodeFilter.SHOW_TEXT + NodeFilter.SHOW_COMMENT

• NOT 操作：~NodeFilter.SHOW_COMMENT (獲取所有的非注釋節(jié)點(diǎn))

只遍歷所有的元素節(jié)點(diǎn)和文本節(jié)點(diǎn)：

document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, null, entityExpandBol);

這就是DOM2中提供的TreeWalker對(duì)象。請(qǐng)記住，并不是所有的瀏覽器都支持此對(duì)象。