ITPub博客

首页 > IT职业 > IT生活 > DOM的TreeWalker对象简介(7)

DOM的TreeWalker对象简介(7)

原创 IT生活 作者:cenfeng 时间:2019-08-01 14:42:58 0 删除 编辑

您可以  在TreeWalker遍历方法之上 自由使用标准DOM  元素属性  /  方法 ,但返回的信息反映了该节点相对于整个文档的关系,而不仅仅是过滤后的结果。 一个例子应该把这一点推向家:

1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" ><ul id =“mylist”></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<li>列表1 </ li></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<li>清单2 </ li></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
<li>列表3 </ li></font></font><font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
</ UL></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(“mylist”)</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;" >
alert(walker.currentNode.childNodes.length) //警报7(包括文本节点)</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
alert(walker.currentNode.getElementsByTagName(“*”)。length) //提醒3</font></font><font></font>
<font></font><font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >
</ SCRIPT></font></font>

在这个例子中,我使用TreeWalker过滤掉UL元素的所有元素。 这里的兴趣点是:

1
<font style= "vertical-align: inherit;" ><font style= "vertical-align: inherit;" >alert(walker.currentNode.childNodes.length) //警报7(包括文本节点)</font></font>

你可能已经预料到3会被警告;  毕竟,UL列表中只有3个元素。 但是,“childNode”是一个DOM属性,而不是TreeWalker,并返回有关一个节点的信息,该节点无视TreeWalker可能发生的任何过滤! 这就是返回7的原因,包括UL包含的文本节点的节点总数。 相同的概念适用于您可以在TreeWalker返回的节点之上调用的DOM方法。


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/69933200/viewspace-2652470/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2019-06-18

  • 博文量
    125
  • 访问量
    129472