Open In App

HTML Collection for Loop

Improve
Improve
Like Article
Like
Save
Share
Report

It is not recommended to use a for/in loop to loop through an HTMLCollection because this type of loop is used for iterating through properties of an object. The HTML Collection contains other properties that may be returned along with the required elements. There are 3 methods that can be used to properly loop through an HTMLCollection.

Method 1: Using the for/of loop

The for/of loop is used to loop over values of an iterable object. This includes arrays, strings, nodeLists, and HTMLCollections. The syntax of this loop is similar to the for/in the loop. The object must be iterable to be used with this loop. 

Syntax: 

for (item of iterable) {
// code to be executed
}

Example: In this example, we will the implementation of the above approach with an example.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML Collection for Loop</title>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>For loop for HTMLCollection elements</b>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <script type="text/javascript">
        // get a HTMLCollection of elements in the page
        let collection = document.getElementsByTagName("p");
 
        // regular for loop
        for (let i of collection) {
            console.log(collection[i]);
        }
    </script>
</body>
 
</html>


Output: 

forloop-console1

Output

Method 2: Using the Array.from() method

The Array.from() method is used to create a new Array from an array-like or iterable object. The HTMLCollection is passed to this method to convert it into an Array. The forEach() method can now be used to iterate over the elements like an array and display them. 

Syntax: 

Array.from(collection).forEach(function (element) {
console.log(element)
});

Example: In this example, we will the implementation of the above approach with an example.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML Collection for Loop</title>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>For loop for HTMLCollection elements</b>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <script type="text/javascript">
        // get a HTMLCollection of elements in the page
        let collection = document.getElementsByTagName("p");
 
        // convert to an array using Array.from()
        Array.from(collection).forEach(function (element) {
            console.log(element)
        });
    </script>
</body>
 
</html>


Output: 

forloop-console1

Output

Method 3: Using a normal for loop.

The elements can be iterated through by using a normal for loop. The number of elements in the HTMLCollection can be found out by using the length property of the collection. A for loop is then run to the number of elements. Each of the items can be accessed by using square brackets with their respective index. 

Syntax: 

for (let i = 0; i &lt; collection.length; i++) {
console.log(collection[i]);
}

Example: In this example, we will the implementation of the above approach with an example.

html




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>HTML Collection for Loop</title>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>For loop for HTMLCollection elements</b>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <script>
        // get a HTMLCollection of elements in the page
        let collection = document.getElementsByTagName("p");
 
        // using for loop
        for (let i = 0; i < collection.length; i++) {
            console.log(collection[i]);
        };
    </script>
</body>
 
</html>


Output: 

forloop-console1

Output



Last Updated : 11 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads