JavaScript getElementsByClassName
last modified April 2, 2025
In this article, we explore the getElementsByClassName method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to access elements by their class attribute.
Basic Definition
The getElementsByClassName method returns a live HTMLCollection of
elements with the specified class name(s). It can be called on the document
object or any DOM element.
Unlike IDs, class names don't need to be unique. Multiple elements can share the same class name. The method returns all matching elements in document order.
The returned collection is live, meaning it automatically updates when the DOM changes. You can specify multiple class names separated by spaces.
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');
for (let i = 0; i < items.length; i++) {
console.log(items[i].textContent);
}
</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 we iterate through using a for loop. For each element, we log its text content to the console.
Multiple Class Names
This example shows how to select elements that have multiple class names.
<!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>
const redBoxes = document.getElementsByClassName('red box');
for (let box of redBoxes) {
box.style.border = '2px solid black';
}
</script>
</body>
</html>
Here we have div elements with various class combinations. We use
getElementsByClassName with two class names separated by a space.
This selects only elements that have both "red" and "box" classes. We then add a black border to each matching element using a for...of loop.
Scoped to Parent Element
This example demonstrates how to scope the search to a specific parent element.
<!DOCTYPE html>
<html>
<head>
<title>Scoped Search</title>
</head>
<body>
<div id="container">
<div class="item">Container Item 1</div>
<div class="item">Container Item 2</div>
</div>
<div class="item">Outside Item</div>
<script>
const container = document.getElementById('container');
const containerItems = container.getElementsByClassName('item');
console.log('Items in container:', containerItems.length);
</script>
</body>
</html>
In this example, we first get a reference to a container element using
getElementById. We then call getElementsByClassName
on this container element.
This limits the search to only elements with class "item" that are descendants of our container. The outside item is not included in the results.
Modifying Multiple Elements
This example shows how to modify multiple elements returned by getElementsByClassName.
<!DOCTYPE html>
<html>
<head>
<title>Modifying Multiple Elements</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p class="text">First paragraph</p>
<p class="text">Second paragraph</p>
<p class="text">Third paragraph</p>
<button onclick="highlightText()">Highlight Text</button>
<script>
function highlightText() {
const paragraphs = document.getElementsByClassName('text');
for (let p of paragraphs) {
p.classList.add('highlight');
}
}
</script>
</body>
</html>
Here we have multiple paragraphs with class "text". When the button is clicked,
the highlightText function gets all these paragraphs and adds the
"highlight" class to each.
This demonstrates how to apply changes to multiple elements at once. We use
classList.add to add a new class rather than directly manipulating
style properties.
Live Collection Behavior
This example demonstrates the live nature of the HTMLCollection returned by getElementsByClassName.
<!DOCTYPE html>
<html>
<head>
<title>Live Collection</title>
</head>
<body>
<div class="dynamic">Initial Item</div>
<button onclick="addItem()">Add Item</button>
<button onclick="showCount()">Show Count</button>
<script>
const dynamicItems = document.getElementsByClassName('dynamic');
function addItem() {
const newItem = document.createElement('div');
newItem.className = 'dynamic';
newItem.textContent = 'New Item ' + (dynamicItems.length + 1);
document.body.appendChild(newItem);
}
function showCount() {
alert('Total items: ' + dynamicItems.length);
}
</script>
</body>
</html>
In this example, we store the collection of elements with class "dynamic" in a variable. The collection automatically updates when new elements are added.
Clicking "Add Item" creates and appends a new div with the same class. Clicking "Show Count" displays the current length of the collection, which increases with each added element.
Source
MDN getElementsByClassName Documentation
In this article, we have shown how to use getElementsByClassName
in JavaScript. This method is fundamental for selecting multiple elements by
class name in web development.
Author
List all JS DOM tutorials.