Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Iterate Elements by ClassName in JavaScript?
To iterate elements by className in JavaScript, we use the getElementsByClassName() method. This method returns a live HTMLCollection of all elements in the document with the specified class name.
In this article, we'll explore different approaches to iterate through elements that share the same class name, using practical examples with three div elements.
getElementsByClassName() Overview
The getElementsByClassName() method returns an HTMLCollection, which is array-like but not a true array. This collection updates automatically when elements are added or removed from the DOM.
Approaches to Iterate Elements by ClassName
Here are the most effective approaches to iterate elements by className in JavaScript:
Using for Loop
The traditional for loop provides index-based access to elements, making it useful when you need the element position.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iterating Elements by ClassName using for Loop</title>
</head>
<body>
<h2>Iterating Elements by ClassName in JavaScript</h2>
<p>Using <strong>for loop</strong> to iterate elements by className.</p>
<div class="count">This is Element 1</div>
<div class="count">This is Element 2</div>
<div class="count">This is Element 3</div>
<script>
let elements = document.getElementsByClassName('count');
for (let i = 0; i < elements.length; i++) {
console.log(`Element ${i + 1}: ${elements[i].innerHTML}`);
}
</script>
</body>
</html>
Element 1: This is Element 1 Element 2: This is Element 2 Element 3: This is Element 3
Using for...of Loop
The for...of loop provides cleaner syntax when you only need to access element content without requiring the index.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iterating Elements by ClassName using for...of Loop</title>
</head>
<body>
<h2>Iterating Elements by ClassName in JavaScript</h2>
<p>Using <strong>for...of loop</strong> to iterate elements by className.</p>
<div class="count">This is Element 1</div>
<div class="count">This is Element 2</div>
<div class="count">This is Element 3</div>
<script>
let elements = document.getElementsByClassName('count');
for (let element of elements) {
console.log(element.textContent);
}
</script>
</body>
</html>
This is Element 1 This is Element 2 This is Element 3
Using forEach() with Array.from()
Since HTMLCollection doesn't have a forEach() method, we can convert it to an array using Array.from() first.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Iterating Elements by ClassName using forEach</title>
</head>
<body>
<h2>Iterating Elements by ClassName in JavaScript</h2>
<p>Using <strong>forEach()</strong> with Array.from() to iterate elements by className.</p>
<div class="count">This is Element 1</div>
<div class="count">This is Element 2</div>
<div class="count">This is Element 3</div>
<script>
let elements = document.getElementsByClassName('count');
Array.from(elements).forEach((element, index) => {
console.log(`Index ${index}: ${element.textContent}`);
});
</script>
</body>
</html>
Index 0: This is Element 1 Index 1: This is Element 2 Index 2: This is Element 3
Comparison of Methods
| Method | Index Access | Readability | Best For |
|---|---|---|---|
for loop |
Yes | Good | When you need index |
for...of loop |
No | Excellent | Simple iteration |
forEach() |
Yes | Excellent | Functional programming style |
Conclusion
All three methods effectively iterate through elements by className. Use for...of for simple cases, traditional for loop when you need indices, and forEach() for functional programming approaches.
11K+ Views
