HTMLCollection for Loop

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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>For loop for HTML 
          Collection 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/of iteration
            for (item of collection) {
                console.log(item);
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

    Console Output:
    forOf-console

  • Method 2: Using the Array.from() method to convert the HTMLCollection to an Array
    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    forEach-console

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    forloop-console



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.