Reputation:
I want to go around the DOM tree, and display all its elements, and their plots. I am stuck with this solution, but it is bad. I need to make a recursive function, but I'm not good at it.
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>
Upvotes: 1
Views: 68
Reputation: 17646
Here is a recuvsive implementation that checks each "parent" element to see if it has more than 0
children. If so loop through the children and call the function and set the "new" parent.
function recursiveTagLister(parent = document.body, depth = 0){
const indentation = (new Array(depth)).fill(' ').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>
Upvotes: 2
Reputation: 28246
If you use document.querySelectorAll("*")
there is no need for a recursion.
I aded a second (indented) solution with the recursive function which I wrote in a "curried" way: the function rtl(ind)
actually returns another (anonymous) function with the argument of a parent node:
console.log([...document.querySelectorAll('*')].map(e=>e.nodeName).join(', '));
// for indentation use a modified recursive function
// as written by kemicofa:
function rtl(ind=''){return function(parent=document.body){
console.log(ind+parent.tagName);
if(parent.children.length > 0){[...parent.children].forEach(rtl(ind+' '));}
}}
rtl()();
<!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>
Upvotes: 2