Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTMLCollection for Loop
The HTML collection is an array of HTML elements. We can access every element of the collection using its index. Also, we can iterate through the array of HTML collections and get all HTML elements of the collection one by one.
Sometimes, we require to use for loop to iterate through the collection of all HTML elements. For example, we have created a group of checkboxes, and when the user presses the clear button, we require to clear all checkboxes. We can access all checkboxes in the HTML collection, iterate through it, and uncheck every checkbox.
In this tutorial, we will learn about different types of for loops to iterate through HTML collections.
Use the for loop
We can access the multiple HTML elements in JavaScript and use them for a loop to iterate through an array of numbers or strings.
We can initialize the index variable in the for loop and access the collection element using the index in every iteration.
Syntax
Users can follow the syntax below to use the for loop to iterate through HTML collections.
for (let i = 0; i < allDivs.length; i++) {
let div = allDivs[i];
}
In the above syntax, ‘i’ is the index initialized with 0, and we are iterating through collections until the index is less than the length of collections.
Example 1
In the example below, we have created the 5 div elements. Also, we have assigned the same class names to every div. In JavaScript, we access all div elements by class name.
So, allDivs is a HTML collection of div elmeents. After that, we used the innerHTML property of div elements to get its content, which showed up in the output.
<html>
<body>
<h2>Using the <i> for loop </i> to iterate through the HTML collections. </h2>
<div class = "divElement"> Div 1 </div>
<div class = "divElement"> Div 2 </div>
<div class = "divElement"> Div 3 </div>
<div class = "divElement"> Div 4 </div>
<div class = "divElement"> Div 5 </div>
<br>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let allDivs = document.getElementsByClassName('divElement');
output.innerHTML += "The content of all Div elements is given below <br>";
for (let i = 0; i < allDivs.length; i++) {
output.innerHTML += allDivs[i].innerHTML + "<br>"
}
</script>
</html>
Use the for-of loop
The for-of loop is also used to iterate through the collections or array elements, giving a single array element in the array order. On the ith iteration, it returns the element from the ith index of the array.
Syntax
Users can follow the syntax below to use the for-of loop to iterate through the HTML collections.
for (let element of collection) {
// element is the collection’s element
}
In the above syntax, a collection is an HTML collection containing multiple HTML elements.
Example 2
In the example below, we have created the HTML's five <p> elements. In JavaScript, we access the <p> elements using the class name. Also, we used the for-of loop to iterate through the collections.
Also, we have access to the inner html of every <p> element while iterating through the HTML collection.
<html>
<body>
<h2>Using the <i> for-of loop </i> to iterate through the HTML collections. </h2>
<p class = "pElement"> Car </p>
<p class = "pElement"> Bike </p>
<p class = "pElement"> Truck </p>
<p class = "pElement"> Cycle </p>
<p class = "pElement"> Tempo </p>
<br>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let allps = document.getElementsByClassName('pElement');
output.innerHTML += "The content of all p elements is given below <br>";
for (let element of allps) {
output.innerHTML += element.innerHTML + "<br>"
}
</script>
</html>
Use the forEach() method
The forEach() method also iterates through every element of the collection. We need to take the collection as a reference, and the forEach() method calls the callback function for every collection element.
We need to pass the callback function as a parameter of the forEach() method, which also takes the collection element as a parameter, which we can use inside the callback function.
Syntax
Users can follow the syntax below to use the forEach() method to iterate through the HTML collections.
allCheckboxes.forEach((checkbox) => {
// this is the body of the callback function
})
In the above syntax, allCheckboxes is a collection of HTML elements.
Example 3
In the example below, we have created a group of multiple checkboxes. After that, we accessed all checkboxes in JavaScript. Whenever the user presses the button, we use the forEach() method to iterate through all checkboxes, and uncheck all checkboxes using JavaScript.
<html>
<body>
<h2>Using the <i> forEach() method </i> to iterate through the HTML collections. </h2>
<label for = "check1"> Checkbox 1 </label>
<input type = "checkbox" id = "check1" value = "one" name = "check">
<label for = "check2"> Checkbox 2 </label>
<input type = "checkbox" id = "check2" value = "two" name = "check">
<label for = "check3"> Checkbox 3 </label>
<input type = "checkbox" id = "check3" value = "three" name = "check">
<label for = "check4"> Checkbox 4 </label>
<input type = "checkbox" id = "check4" value = "foruth" name = "check">
<label for = "check5"> Checkbox 5 </label>
<input type = "checkbox" id = "check5" value = "Fifth" name = "check">
<br><br>
<button onclick = "clearChecks()"> Clear </button>
</body>
<script>
let output = document.getElementById('output');
function clearChecks() {
let allCheckboxes = document.getElementsByName('check');
allCheckboxes.forEach((checkbox) => {
checkbox.checked = false;
})
}
</script>
</html>
We learned to loop through the HTML collections using for loop in JavaScript. We have used the three variants of the for loop to iterate through the collection. The forEach() loop is faster than the normal for loop and for-of loop and performs better.
5K+ Views
