You can use getElementsByClassName() or querySelectorAll() method to get elements by multiple class names in JavaScript. Specific steps will be introduced in this article. Let’s check it out.
How to get elements by multiple class names in JavaScript
In this article, we give three methods with specific cases to help you know how to get elements by multiple class names in JavaScript:
- Using the
getElementsByClassName()method - Using the
querySelectorAll()method - Using the
querySelector()method
We will use the following HTML code throughout this article.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
padding: 20px 50px;
}
.text {
font-size: 20px;
}
.red {
color: red;
}
.blue {
color: blue;
}
.thick {
font-weight: bold;
}
</style>
</head>
<body>
<p class="text red">LearnShareIT</p>
<p class="text red thick">LearnShareIT</p>
<p class="text blue">LearnShareIT</p>
<p class="text blue thick">LearnShareIT</p>
<script src="script.js"></script>
</body>
</html>Output:
Now we will get elements by multiple class names using JavaScript on this HTML code with different methods.
Using the getElementsByClassName() method
The getElementsByClassName() method returns an HTMLCollection that looks like an array, an HTMLCollection containing elements with all the specified class names.
Syntax:
document.getElementsByClassName(classname)Parameter:
- classname: The class name of the specified elements.
Code:
// Get all the elements of 'text' class and 'thick' class
const collection = document.getElementsByClassName('text thick');
collection[0].style.backgroundColor = "yellow";
console.log(collection);Console:
[p.text.red.thick, p.text.blue.thick]In the above code, we use getElementsByClassName() to get all the elements of ‘text’ class and ‘thick’ class and store them in a HTMLCollection named “collection”.
We then take the element with index 0 and set the backgroundColor property to ‘yellow’.
Output:
Using the querySelectorAll() method
The querySelectorAll() method returns a NodeList containing all elements that match one or more CSS selectors.
Syntax:
document.querySelectorAll(CSS selectors)Parameters:
- CSS selectors: One or more CSS selectors (separated by “,”).
Code:
// Get all elements of CSS selectors '.text' or '.thick'
const nodelist = document.querySelectorAll('.text, .thick');
nodelist[0].style.backgroundColor = "yellow";
console.log(nodelist);Console:
[p.text.red, p.text.red.thick, p.text.blue, p.text.blue.thick]In the above code, we use querySelectorAll() to get all elements of CSS selectors ‘.text’ or ‘.thick’ and store them in a NodeList named “nodelist”.
Then we take the element with index 0 and set the backgroundColor property to ‘yellow’.
Output:
Using the querySelector() method
The querySelector() method returns the first element of a NodeList containing all elements that match one or more CSS selectors.
Syntax:
document.querySelector(CSS selectors)Parameters:
- CSS selectors: One or more CSS selectors (separated by “,”).
Code:
// Get the first element of CSS selectors '.red' or '.thick'
const node = document.querySelector('.red, .thick');
node.style.backgroundColor = "yellow";
console.log(node);Console:
p.text.red.thickIn the above code, we use the querySelector() method to get the first element of CSS selectors ‘.red’ or ‘.thick’. Then we set the backgroundColor property to ‘yellow’ for the newly received element.
Output:
Summary
This article has shown how to get elements by multiple class names in JavaScript. I hope the information in this article will be helpful to you. If you have any problems, please comment below. Thank you for reading!
Maybe you are interested:
- Clear Input fields after Submit using JavaScript
- Check if an element is a checkbox using javascript
- Call a function if an Element exists using JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
