在这种情况下，并非文档中的所有DIV和IMG元素都可以被提取！这是因为图像可能包含在被拒绝的元素（如<P>）中，导致TreeWalker在遇到不需要的P元素时自动跳过它。

- 示例：按类属性处理元素

在本演示中，我将使用TreeWalker对象轻松过滤出页面上的所有元素，其中class =“blue”，并将其颜色更改为红色。

<font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>getelementbyclass =函数（节点）{</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

if

（node.className ==“blue”）

//过滤掉具有此class属性的元素</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

返回NodeFilter.FILTER_ACCEPT</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;"

>

返回NodeFilter.FILTER_SKIP</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

}</font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

rootnode = document.body</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

walker = document.createTreeWalker（rootnode，NodeFilter.SHOW_ELEMENT，getelementbyclass，

false

）</font></font><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;"

>

walker.currentNode.style.color = “红”</font></font><font></font>

<font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

walker.currentNode = document.body 

//将Tree Walker位置重置为根节点</font></font>

这里没什么新东西，但注意红线。在我遍历我的Tree Walker实例后，我将其currentNode属性重置回根节点，因此后续调用将在再次收集已过滤节点的开始时开始。

ITPub博客

在document.createTreeWalker（）中过滤（3）

- 示例：按类属性处理元素

最新文章