不要将上述方法与标准DOM元素属性 / 方法混淆 ; 这些只能在TreeWalker对象中工作，以便您导航已过滤的节点。

使用与上面相同的示例，让我们看看如何使用遍历方法遍历返回的节点：

<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博客

DOM的TreeWalker对象简介（3）

最新文章