DOM的TreeWalker物件簡介（3）

cenfeng發表於2019-07-30
物件

不要將上述方法與標準DOM元素  屬性  /  方法 混淆  ;  這些只能在TreeWalker物件中工作，以便您導航已過濾的節點。

使用與上面相同的示例，讓我們看看如何使用遍歷方法遍歷返回的節點：

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" ><div id =“contentarea”></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<p>一些<span>文字</ span> </ p></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<b>粗體文字</ b></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
</ DIV></font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<script type =“text / javascript”></font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var rootnode = document.getElementById（“contentarea”）</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
var walker = document.createTreeWalker（rootnode，NodeFilter.SHOW_ELEMENT， null ， false ）</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
//警告Tree Walker當前指向的起始節點（根節點）</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
alert（walker.currentNode.tagName） //提醒DIV（id = contentarea）</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
//單步執行並提醒所有子節點</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
while （walker.nextNode（））</font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
alert（walker.currentNode.tagName） //提醒P，SPAN和B.</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
//返回集合的第一個子節點併發出警報</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
walker.currentNode = rootnode // reset TreeWalker指向指向根節點的指標</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
alert（walker.firstChild（）。tagName） //提醒P.</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
</ SCRIPT></font></font>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69933200/viewspace-2652257/，如需轉載，請註明出處，否則將追究法律責任。

相關文章