JavaScript getElementsByClassName
last modified April 2, 2025
In this article, we explore the document.getElementsByClassName method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to access elements by their class attribute.
Basic Definition
The document.getElementsByClassName method returns a live HTMLCollection
of elements with the specified class name(s). Unlike IDs, multiple elements can
share the same class name.
This method accepts one or more class names separated by spaces. It searches the entire document but can also be called on specific elements to search their descendants only.
Basic getElementsByClassName
This example demonstrates how to access elements with a specific class name.
<!DOCTYPE html>
<html>
<head>
<title>Basic getElementsByClassName</title>
</head>
<body>
<div class="item">First item</div>
<div class="item">Second item</div>
<div class="item">Third item</div>
<script>
const items = document.getElementsByClassName('item');
console.log(items.length); // Outputs: 3
console.log(items[0].textContent); // Outputs: First item
</script>
</body>
</html>
In this basic example, we have three div elements with the class "item". The
JavaScript code retrieves all elements with this class using
getElementsByClassName.
The method returns an HTMLCollection, which is array-like but not an actual array. We can access elements by index and check the collection's length.
Modifying Multiple Elements
This example shows how to modify all elements with a specific class name.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Multiple Elements</title>
</head>
<body>
<p class="highlight">First paragraph</p>
<p class="highlight">Second paragraph</p>
<p class="highlight">Third paragraph</p>
<button onclick="highlightAll()">Highlight All</button>
<script>
function highlightAll() {
const elements = document.getElementsByClassName('highlight');
for (let i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = 'yellow';
}
}
</script>
</body>
</html>
Here we have three paragraph elements with the class "highlight" and a button. When clicked, the button triggers a function that changes all elements' background color to yellow.
This demonstrates how to iterate through an HTMLCollection to modify multiple elements at once. The collection is live, meaning it automatically updates if elements are added or removed from the DOM.
Multiple Class Names
This example demonstrates using multiple class names with getElementsByClassName.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Class Names</title>
</head>
<body>
<div class="box red">Red Box</div>
<div class="box blue">Blue Box</div>
<div class="box red large">Large Red Box</div>
<script>
// Get elements with both 'box' and 'red' classes
const redBoxes = document.getElementsByClassName('box red');
console.log(redBoxes.length); // Outputs: 2
// Get elements with all three classes
const largeRedBoxes = document.getElementsByClassName('box red large');
console.log(largeRedBoxes.length); // Outputs: 1
</script>
</body>
</html>
In this example, we have div elements with multiple class names. The method can accept multiple class names separated by spaces to find elements that have all specified classes.
The order of class names in the method call doesn't matter, but all specified classes must be present on the element for it to be included in the results.
Combining with Query Selectors
This example shows how to combine getElementsByClassName with query selectors.
<!DOCTYPE html>
<html>
<head>
<title>Combining Methods</title>
</head>
<body>
<div id="container">
<p class="message">First message</p>
<p class="message">Second message</p>
</div>
<p class="message">Third message</p>
<script>
// Get container element first
const container = document.getElementById('container');
// Then get messages only within container
const containerMessages = container.getElementsByClassName('message');
console.log(containerMessages.length); // Outputs: 2
// Compare with document-wide search
const allMessages = document.getElementsByClassName('message');
console.log(allMessages.length); // Outputs: 3
</script>
</body>
</html>
Here we demonstrate how to scope the class search to a specific element by first selecting a parent element and then calling getElementsByClassName on it.
This technique is useful when you want to limit your search to a specific section of the document, improving performance and avoiding unintended matches.
Converting to Array
This example shows how to convert the HTMLCollection to a standard array.
<!DOCTYPE html>
<html>
<head>
<title>Converting to Array</title>
</head>
<body>
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<script>
// Get HTMLCollection
const cardsCollection = document.getElementsByClassName('card');
// Convert to array using Array.from()
const cardsArray = Array.from(cardsCollection);
// Now we can use array methods
cardsArray.forEach(card => {
card.style.border = '2px solid black';
});
console.log(cardsArray.map(card => card.textContent));
</script>
</body>
</html>
In this example, we convert the HTMLCollection returned by getElementsByClassName to a standard array using Array.from(). This allows us to use array methods like forEach and map.
While HTMLCollection has some array-like properties (length, index access), converting to a true array provides more flexibility and functionality for manipulating the elements.
Source
MDN getElementsByClassName Documentation
In this article, we have shown how to use document.getElementsByClassName
in JavaScript. This method is fundamental for selecting multiple elements by
their class names in web development.
Author
List all JS DOM tutorials.