如何遍历DOM并显示所有标签?

问题描述 投票:1回答:2

我想遍历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>
javascript html dom
2个回答
1
投票

console.log([...document.querySelectorAll('*')].map(e=>e.nodeName).join(', '));
<!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>
© www.soinside.com 2019 - 2024. All rights reserved.