zoukankan      html  css  js  c++  java
  • 深度优先遍历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>
  • 相关阅读:
    MySQL information_schema
    Sqlmap入门
    MySQL UNION
    Order by 1
    yum安装软件时,提示No package netstat available.的解决方法
    Centos7查看端口占用
    查看Centos版本
    Linux非交互方式设置密码
    Hive中的用户自定义函数
    Dbeaver连接Hive和Mysql的配置
  • 原文地址:https://www.cnblogs.com/chuanzi/p/10386171.html
Copyright © 2011-2022 走看看