DOM的TreeWalker对象简介（5）

最新推荐文章于 2025-11-14 10:56:36 发布

转载最新推荐文章于 2025-11-14 10:56:36 发布 · 109 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用TreeWalker对象遍历DOM元素，通过示例代码展示如何选取特定节点，包括设置过滤条件和使用遍历方法。适用于前端开发者理解和操作DOM结构。

不要将上述方法与标准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>  
        

  

当您使用遍历方法逐步执行节点时，TreeWalker不仅返回有问题的节点，而且还会移动到该节点。这就是在使用以下步骤遍历节点之后的原因：

 
    
          <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;"  
          >  
        
 
          //代码在这里</font></font>  
        

  