当前位置: 萬仟网 > IT编程>开发语言>JavaScript > JS高级---遍历DOM树

JS高级---遍历DOM树

2020年01月14日  | 萬仟网IT编程  | 我要评论

遍历dom树

 

 第一个函数: 给我根节点, 我会找到所有的子节点: fordom(根节点)
 获取这个根节点的子节点
 var children=根节点的.children
 调用第二个函数

 第二个函数: 给我所有的子节点, 我把每个子节点的名字显示出来(children)
 for(var i=0;i<children.length;i++){
   每个子节点
   var child=children[i];
   f1(child); 给我节点, 我显示该节点的名字
   child是子节点,但是如果child里面还有子节点,此时child就是爹了
   child.children&&第一个函数(child)

 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>遍历dom树</title>
</head>

<body>
<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>
</body>

</html>

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com