Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Iterate Elements by ClassName in JavaScript?
To iterate elements by className in JavaScript, we will be using getElementsByClassName() method. It is used for getting the collection of all the elements in the document with specified classname.
In this article we are having three div elements each having same class name. Our task is to iterate elements by className in JavaScript.
Approaches to Iterate Elements by ClassName
Here is a list of approaches to iterate elements by className in JavaScript which we will be discussing in this article with stepwise explaination and complete example codes.
Iterate Elements by ClassName using for loop
To iterate elements by className in JavaScript, we will be using for loop. First we will use getElementsByClassName to get collection of element with same class name, then iterate over it using for loop.
- We have used div tag to create three div element having some text content each having same class name.
- Then, we have used getElementsByClassName to get all the elements with class name count and stored it in a variable named ele.
- Then, we have used for loop. It starts iteration from 0 till size of collection stored in ele using length property.
- At the end we have displayed output in console using console.log() method.
Example
Here is a complete example code implementing above mentioned steps to iterate elements by className in JavaScript using for loop.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Iterating Elements by ClassName in JavaScript
</title>
<body>
<h2>
Iterating Elements by ClassName in JavaScript
</h2>
<p>
In this example we have used <strong>for
</strong>loop to iterate elements by className
in JavaScript.
</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 ele = document.getElementsByClassName('count');
for (let index = 0; index < ele.length; index++) {
console.log(ele[index].innerHTML);
}
</script>
</body>
</html>
Iterate Elements by ClassName using for..of loop
In this approach to iterate through elements by class name in JavaScript, we are using for...of loop.
- We have used getElementsByClassName to get all the elements with the class name count and stored it in a variable named ele.
- Then, we have used the for...of loop to iterate over each element in ele.
- In each iteration, the loop accesses textContent property. It updates each div element and displays output using console.log() method.
Example
Here is a complete example code implementing above mentioned steps to iterate elements by className in JavaScript using for...of loop.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Iterating Elements by ClassName in JavaScript
</title>
</head>
<body>
<h2>
Iterating Elements by ClassName in JavaScript
</h2>
<p>
In this example we have used <strong>for...of
</strong>loop to iterate elements by className
in JavaScript.
</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 ele = document.getElementsByClassName('count');
for (let element of ele) {
console.log(element.textContent);
}
</script>
</body>
</html>
Conclusion
In this article we have discussed two types of loops to iterate elements by className in JavaScript. We have used getElementsByClassName to get element with same class name and then used for and for...of loop to iterate elements.
11K+ Views
