EN
JavaScript - find all elements inside web page body
0 points
In this article, we would like to show you how to find all elements inside web page body using JavaScript.
Quick solution:
xxxxxxxxxx1
document.body.querySelectorAll('*');or:
xxxxxxxxxx1
document.querySelectorAll('body > *');
In this example, we create a reusable function that uses querySelectorAll() method on body element with * selector to get the collection of all HTML elements inside the <body>.
xxxxxxxxxx1
2
<html>3
<body>4
<h1>Header</h1>5
<div>Div</div>6
<script>7
8
function findElements() {9
return document.body.querySelectorAll('*'); // finds all elements10
}11
12
13
// Usage example:14
15
window.addEventListener('load', function() {16
var elements = findElements();17
for (var i = 0; i < elements.length; ++i) {18
console.log(elements[i]); // print element19
}20
});21
22
</script>23
<p>Paragraph</p>24
<span>Span</span>25
</body>26
</html>In this example, we create a reusable function that uses querySelectorAll() method on with body > * selector to get the collection of all HTML elements inside the <body>.
xxxxxxxxxx1
2
<html>3
<body>4
<h1>Header</h1>5
<div>Div</div>6
<script>7
8
function findElements() {9
return document.querySelectorAll('body > *'); // finds all elements10
}11
12
13
// Usage example:14
15
window.addEventListener('load', function() {16
var elements = findElements();17
for (var i = 0; i < elements.length; ++i) {18
console.log(elements[i]); // print element19
}20
});21
22
</script>23
<p>Paragraph</p>24
<span>Span</span>25
</body>26
</html>Note:
The
findElements()function needs to be executed after windowloadevent or at the end of the script to make sure that all elements are loaded before the function execution.
