深度优先遍历DOM节点

Posted 2021-02-09 chuanzi

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了深度优先遍历DOM节点相关的知识，希望对你有一定的参考价值。

深度优先遍历的特点就是对每一个可能的分支路径深入到不能再深入为止，而且每个节点只能访问一次。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML DOM的节点遍历</title>
<script type="text/javascript">
    var info = "";  
    var num=0;
    function output_node() {
        //document 获取根元素  
        var root = document.documentElement;  
        //遍历所有的节点  
        traverseNodes(root);
        
        info="共有"+num+"个元素节点
"+"按深度优先遍历方法搜索节点如下：
"+info;
        alert(info);
        info = "";    
        num=0;    
    }
    
    function display(node){
      info+="第"+(++num)+"个元素是:"+node.nodeName+"
";  
    }     
    
    function traverseNodes(node){  
              
        //判断是否是元素节点  
        if(node.nodeType == 1){ 
            display(node);  
                  
            //判断该元素节点是否有子节点  
            if(node.hasChildNodes){              
                //得到所有的子节点  
                var sonnodes = node.childNodes; 
                //遍历所有的子节点
                  
                for (var i = 0; i < sonnodes.length; i++) {  
                    //得到具体的某个子节点  
                    var sonnode = sonnodes.item(i);  
                    //递归遍历  
                    traverseNodes(sonnode);
                }  
            }
        }
    }  
    
    

</script>

</head>

<body>
<form id="form1" name="form1" method="get" action="">
<input type="button" id="test" value="输出HTML DOM元素节点" onclick="output_node()" />
</form>
<main>
    <div>
        <img src="">
        <h2>hhh</h2>
        <span>kkk</span>
    </div>
    <ul>
        <li><h5>fff</h5></li>
        <li><div>ggg</div></li>
    </ul>
</main>

</body>
</html>

深度优先遍历的实际效果等同于直接遍历访问内置数组document.all中的元素

<script>
    function output_node() {
        var j = 0
        var info = "页面元素个数=" + document.all.length + "
";
        for (var i = 0; i < document.all.length; i++) {
            j = i + 1;
            info = info + "第" + j + "个=" + document.all(i).tagName + "
";
        }
        alert(info);
    }
    output_node();
</script>

以上是关于深度优先遍历DOM节点的主要内容，如果未能解决你的问题，请参考以下文章