深度优先遍历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+"个元素节点\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>

 

posted @ 2019-02-15 22:03  chuanzi  阅读(1166)  评论(0)  编辑  收藏  举报