EN
JavaScript - get handle to HTML element with multiple classes
0
points
In this article, we would like to show you how to get handle to HTML element with multiple classes using JavaScript.
Quick solution:
var myElements = document.querySelectorAll('.class1.class2');
myElements.forEach((element) => {
// do something...
});
Practical example
In this example, we use querySelectorAll() to get an array of HTML elements with specific classes (class1 and class2).
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div class="class1 class2">element1</div>
<div class="class1 class3">element2</div>
<div class="class1 class4">element3</div>
<div class="class1 class2">element4</div>
<script>
// get elements by multiple classes
var myElements = document.querySelectorAll('.class1.class2');
// usage example:a
myElements.forEach((element) => {
element.style.backgroundColor = 'yellow';
});
</script>
</body>
</html>
More classes example
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<div class="class1 class2">element1</div>
<div class="class1 class2 class3">element2</div>
<div class="class1 class2 class3 class4">element3</div>
<script>
// get elements by multiple classes
var myElements1 = document.querySelectorAll('.class1.class2');
var myElements2 = document.querySelectorAll('.class1.class2.class3');
var myElements3 = document.querySelectorAll('.class1.class2.class3.class4');
// usage example:
myElements1.forEach((element) => {
element.style.backgroundColor = 'yellow';
});
myElements2.forEach((element) => {
element.style.backgroundColor = 'orange';
});
myElements3.forEach((element) => {
element.style.backgroundColor = 'red';
});
</script>
</body>
</html>