我想遍历DOM树,并显示其所有元素及其图。我坚持使用此解决方案,但这很糟糕。我需要做一个递归函数,但是我不擅长。
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>
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>