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:
xxxxxxxxxx1
// select all <img> elements2
3
var images = document.querySelectorAll('img');
In this example, we present how to use querySelectorAll() to select all <img> elements.
xxxxxxxxxx1
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.
xxxxxxxxxx1
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>
