zoukankan      html  css  js  c++  java
  • 遍历 DOM 树

    <h1>遍历 DOM 树</h1>
    <p style="color: green;">Tip: 可以在遍历的回调函数中任意定制需求</p>
    <div>
    <ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
    </ul>
    <div>
    <div>
    <span>haha</span>
    </div>
    </div>
    </div>
    <div id="demo_node">
    <ul>
    <li>123</li>
    </ul>
    <p>hello</p>
    <h2>world</h2>
    <div>
    <p>dsa</p>
    <h3>
    <span>dsads</span>
    </h3>
    </div>
    </div>
    <script>

    //获取页面中的根节点--根标签
    var root=document.documentElement;//html
    //函数遍历DOM树
    //根据根节点,调用fn的函数,显示的是根节点的名字
    function forDOM(root1) {
    //调用f1,显示的是节点的名字
    // f1(root1);
    //获取根节点中所有的子节点
    var children=root1.children;
    //调用遍历所有子节点的函数
    forChildren(children);
    }
    //给我所有的子节点,我把这个子节点中的所有的子节点显示出来
    function forChildren(children) {
    //遍历所有的子节点
    for(var i=0;i<children.length;i++){
    //每个子节点
    var child=children[i];
    //显示每个子节点的名字
    f1(child);
    //判断child下面有没有子节点,如果还有子节点,那么就继续的遍历
    child.children&&forDOM(child);
    }
    }
    //函数调用,传入根节点
    forDOM(root);
    function f1(node) {
    console.log("节点的名字:"+node.nodeName);
    }

    //节点:nodeName,nodeType,nodeValue
    </script>
  • 相关阅读:
    STM32F746G-DISCO官方例程烧写
    zedboard学习第一篇
    itop4412开发板添加开机启动程序
    dsp6657的串口学习
    开源SLAM
    非线性滤波(信号处理)
    图形学领域的关键算法及源码链接
    基于倾斜影像的城市三维场景重建
    基于RFID恢复信号场
    对“自然语言处理”的理解
  • 原文地址:https://www.cnblogs.com/lujieting/p/10082493.html
Copyright © 2011-2022 走看看