javascript - 如何遍历 DOM 并显示所有标签？-6ren

javascript - 如何遍历 DOM 并显示所有标签？

转载作者：行者123 更新时间：2023-11-30 09:11:29

我想遍历 DOM 树，并显示它的所有元素及其绘图。我坚持这个解决方案，但它很糟糕。我需要做一个递归函数，但我不擅长。

Result of program

const First = document.querySelector("*");
  for (var i = 0; i < First.children.length; i++) {
      console.log(First.children[i]);
  for (var j = 0; j < First.children[i].children.length; j++) {
    if (First.nodeType == 1) {
       console.log(First.children[i].children[j]);
    }
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Some text
     <a href="#">References</a>
  </p>
  <ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Tree</li>
  </ul>
</body>
</html>

最佳答案

这是一个递归实现，它检查每个“父”元素以查看它是否有超过 0 个子元素。如果是这样，遍历子项并调用函数并设置"new"父项。

function recursiveTagLister(parent = document.body, depth = 0){
  const indentation = (new Array(depth)).fill('&nbsp;').join("");
  console.log(indentation + parent.tagName);
  if(parent.children.length > 0){
    Array
    .from(parent.children)
    .forEach(item=>recursiveTagLister(item, depth+1));
  }
}

recursiveTagLister();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
  <h1>Header</h1>
  <p>Some text
     <a href="#">References</a>
  </p>
  <ul id="myList">
    <li>One</li>
    <li>Two</li>
    <li>Tree</li>
  </ul>
</body>
</html>

关于javascript - 如何遍历 DOM 并显示所有标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58594959/

文章推荐： javascript - 将对象文字转换为 ES6 Javascript 中的函数

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何遍历 DOM 并显示所有标签？