HTMLCollection for Loop

10 Jan, 2022
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 HTMLCollection 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 loop. The object must be iterable to be used with this loop.Syntax:for (item of iterable) {  // code to be executed}Example:<!DOCTYPE html><html>  <head>    <title>For loop for HTMLCollection elements</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 = 0; i < collection.length; i++) {            console.log(collection[i]);        }    </script></body>  </html>Console Output:
The syntax of this loop is similar to the for/in loop. The object must be iterable to be used with this loop.
Syntax:
for (item of iterable) {  // code to be executed}
Example:
<!DOCTYPE html><html>  <head>    <title>For loop for HTMLCollection elements</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 = 0; i < collection.length; i++) {            console.log(collection[i]);        }    </script></body>  </html>
Console Output:
Method 2: Using the Array.from() method to convert the HTMLCollection to an ArrayThe 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:<!DOCTYPE html><html>  <head>    <title>For loop for HTMLCollection elements</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:
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:
<!DOCTYPE html><html>  <head>    <title>For loop for HTMLCollection elements</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:
Method 3: Using a normal for loopThe 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 < collection.length; i++) {        console.log(collection[i]);      }Example:<!DOCTYPE html><html>  <head>    <title>For loop for HTMLCollection elements</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");      // using for loop        for (let i = 0; i < collection.length; i++) {    console.log(collection[i]);        });    </script></body>  </html>Output:
Each of the items can be accessed by using square brackets with their respective index.
Syntax:
for (let i = 0; i < collection.length; i++) {        console.log(collection[i]);      }
Example:
<!DOCTYPE html><html>  <head>    <title>For loop for HTMLCollection elements</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");      // using for loop        for (let i = 0; i < collection.length; i++) {    console.log(collection[i]);        });    </script></body>  </html>
Output:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
How to append HTML code to a div using JavaScript ?
Difference Between PUT and PATCH Request
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?