JavaScript遍历DOM

最新推荐文章于 2022-10-06 19:44:31 发布

转载最新推荐文章于 2022-10-06 19:44:31 发布 · 108 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/leetom/archive/2010/10/29/2845906.html

文章标签：

#javascript #前端 #数据结构与算法 #ViewUI

本文介绍了JavaScript中DOM遍历的相关知识，包括NodeIterator和TreeWalker对象的使用方法，并提供了具体示例代码。通过这些工具，开发者可以实现对DOM树的深度优先搜索。

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

在JavaScript中一个关于DOM遍历的对象是NodeIterator, 用它可以对DOM书进行深度优先的搜索（DOM标准，但IE不支持，IE8实测）。搜索过程中可以使用nextNode()和previousNode()方法。要创建NodeIterator对象，使用document对象的createNodeIterator()方法。此方法接受4个参数：

root——从树中开始搜索的那个节点。
whatToShow——一个述职代码，代表那些节点需要访问。
filter——NodeFilter对象，用来决定需要忽略哪些节点。
entityReferenceExpansion——布尔值，表示是否需要扩展实体引用。

example: html内容：

 <body>
        <div id="div1">
            <p>Hello <b>World!</b></p>
            <ul>
                <li>List item 1</li>
                <li>List item 2</li>
                <li>List item 3</li>
            </ul>
        </div>
        <textarea rows="10" cols="40" id="text1"></textarea><br />
        <input type="button" value="Make List" onclick="makeList()" />
  </body>

JavaScript内容：


<script type="text/javascript">

   var iterator = null;

   function makeList() {
       var oDiv = document.getElementById("div1");  //div1为开始遍历的节点
       var oFilter = new Object;
       oFilter.acceptNode = function (oNode) {
    return (oNode.tagName == "P") ? 
     NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT; //在结果中不想包含<p/>元素，需要用此NodeFilter对象，它只有acceptNode()一个方法
       };

       iterator = document.createNodeIterator(oDiv, NodeFilter.SHOW_ELEMENT, oFilter, false); //创建NodeIterator对象
       var oOutput = document.getElementById("text1");
       var oNode = iterator.nextNode();
       while (oNode) {
    oOutput.value += oNode.tagName + "n";
    oNode = iterator.nextNode();
       }

   }

</script>

另外可以使用TreeWalker对象（IE同样不支持...），它有NodeIterator所有的功能，还添加了一些遍历的方法：

parentNode()——进入当前节点的父节点
firstChild()——进入当前节点的第一个子节点
lastChild()——进入当前节点的最后一个子节点
nextSibling()——进入当前节点的下一个兄弟节点
previousSibling()——进入当前节点的前一个兄弟节点

example:(html同上)

<script type="text/javascript">

   var walker = null;

   function makeList() {
       var oDiv = document.getElementById("div1");

       walker = document.createTreeWalker(oDiv, NodeFilter.SHOW_ELEMENT, null, false);

       var oOutput = document.getElementById("text1");

       walker.firstChild();   //go to <p>
       walker.nextSibling();  //go to <ul>
       oNode = walker.firstChild();  //go to <li>
       while (oNode) {
    oOutput.value += oNode.tagName + "n";                  
    oNode = walker.nextSibling();
       }

   }

</script>

Web前端浏览器兼容性问题确实令人头疼，用jQuery或许是很不错的选择~

转载于:https://www.cnblogs.com/leetom/archive/2010/10/29/2845906.html