码迷,mamicode.com
首页 > 其他好文 > 详细

深度优先遍历DOM节点

时间:2019-02-15 22:30:50      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:action   oct   div   var   tput   dom节点   name   java   kkk   

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

<!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+"个元素节点\n"+"按深度优先遍历方法搜索节点如下:\n"+info;
        alert(info);
        info = "";    
        num=0;    
    }
    
    function display(node){
      info+=""+(++num)+"个元素是:"+node.nodeName+"\n";  
    }     
    
    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 + "\n";
        for (var i = 0; i < document.all.length; i++) {
            j = i + 1;
            info = info + "" + j + "个=" + document.all(i).tagName + "\n";
        }
        alert(info);
    }
    output_node();
</script>

 

深度优先遍历DOM节点

标签:action   oct   div   var   tput   dom节点   name   java   kkk   

原文地址:https://www.cnblogs.com/chuanzi/p/10386171.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!