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>
  • 相关阅读:
    empty()与remove([expr])的区别.转
    ThinkPHP验证码刷新随机数
    ThinkPHP的cookide保存二维数组的方法
    ThinkPHP 关联模型中查询某条记录的父级(非查询子级)
    DWZ的选择带回功能无法带回第一个value中的值
    IS_POST:判断是否存在POST提交
    ThinkPHP中Xheditor编辑器报错
    一台电脑安装两个xampp的方法
    ajax中文传送到模板显示为null
    【MySQL】MySQL事务回滚脚本
  • 原文地址:https://www.cnblogs.com/chuanzi/p/10386171.html
Copyright © 2011-2022 走看看