JS 遍历DOM树代码（含注释）

最新推荐文章于 2021-12-17 23:40:32 发布

夏沐_lk

最新推荐文章于 2021-12-17 23:40:32 发布

阅读量451

点赞数

CC 4.0 BY-SA版权

分类专栏： js代码文章标签： JS 遍历DOM树

本文链接：https://blog.youkuaiyun.com/guanmao4322/article/details/88202035

js代码专栏收录该内容

65 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript遍历DOM树，展示了如何通过递归函数实现对网页中所有元素的访问，包括如何获取和显示节点的名字。适用于前端开发者理解和操作DOM结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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



//  第一个函数:给我根节点,我会找到所有的子节点: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)
//
//  }



</script>
</body>

</html>