DOM的TreeWalker对象简介（3）

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

cuizhangce7191

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

阅读量73

点赞数

文章标签： javascript ViewUI

本文详细介绍了如何使用TreeWalker对象遍历DOM树，通过具体示例展示了如何获取和操作已过滤的节点，适用于前端开发人员深入理解DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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