DOM的TreeWalker对象简介（7）

最新推荐文章于 2025-05-29 11:38:29 发布

cuizhangce7191

最新推荐文章于 2025-05-29 11:38:29 发布

阅读量82

点赞数

文章标签： javascript ViewUI

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

 
    
          <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元素的所有元素。这里的兴趣点是：

 
          <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博客 ” ，链接：http://blog.itpub.net/69933200/viewspace-2652470/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/69933200/viewspace-2652470/