EN
JavaScript - select all HTML elements with specific querySelector
0 points
In this article, we would like to show you how to select all HTML elements with a specific querySelector using JavaScript.
Quick solution:
xxxxxxxxxx
1
// select all <img> elements
2
3
var images = document.querySelectorAll('img');
In this example, we present how to use querySelectorAll()
to select all <img>
elements.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<img src="https://dirask.com/static/bucket/1574890428058-BZOQxN2D3p--image.png" />
5
<img src="https://dirask.com/static/bucket/1590005168287-pPLQqVWYa9--image.png" />
6
<img src="https://dirask.com/static/bucket/1590005138496-MWXQzxrDw4--image.png" />
7
<img src="https://dirask.com/static/bucket/1590005318053-3nbAR5nDEZ--image.png" />
8
<script>
9
10
var images = document.querySelectorAll('img');
11
12
for (let image of images) {
13
console.log(image.outerHTML);
14
}
15
16
</script>
17
</body>
18
</html>
In this example, we present how to use querySelectorAll()
to select all elements that contain a specific class
.
xxxxxxxxxx
1
2
<html>
3
<body>
4
<div class="my-class" data-something="some"></div>
5
<div class="my-class" data-something="some"></div>
6
<div class="my-class"></div>
7
<div class="my-class" data-else="some"></div>
8
<div class="my-class" data-something="some"></div>
9
<script>
10
11
var allNodes = document.querySelectorAll('.my-class');
12
13
for (let node of allNodes) {
14
console.log(node.outerHTML);
15
}
16
17
</script>
18
</body>
19
</html>