Open In App

How to loop through HTML elements without using forEach() loop in JavaScript ?

Last Updated : 18 Jun, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In this article, we will learn how to loop through HTML elements without using the forEach() method.

This can be done in the following ways:

Table of Content

Approach 1: Using the for loop

The HTML elements can be iterated by using the regular JavaScript for loop. The number of elements to be iterated can be found using the length property. The for loop has three parts, initialization, condition expression, and increment/decrement expression. Each of the items can be accessed by using square brackets with their respective index.

Syntax:

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

 Example: In this example, we will see the use of the for loop.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to loop through HTML elements
        without using forEach() loop
        in JavaScript ?
    </title>
</head>

<body>
    <!-- HTML elements to iterate -->
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <p>This is paragraph 3.</p>

    <script type="text/javascript">
        // Get the elements to be iterated
        let htmlElements =
            document.getElementsByTagName("p");

        // Use a regular for-loop
        for (let i = 0; i < htmlElements.length; i++) {

            // Print the current element
            console.log(htmlElements[i]);
        }
    </script>
</body>

</html>

Output:

output1
Output on the browser

Approach 2: Using the While loop

The HTML elements can be iterated by using a regular JavaScript while loop. The number of elements can be found using the length property. A temporary value is used to keep track of the current iteration by checking it in the condition expression. Each of the items can then be accessed by using square brackets with their respective index.

Syntax:

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

Example: In this example, we will see the use of Using the While loop.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to loop through HTML
        elements without using
        forEach() loop in JavaScript ?
    </title>
</head>

<body>
    <!-- HTML elements to iterate -->
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <p>This is paragraph 3.</p>

    <script type="text/javascript">
        // Get the elements to be iterated
        let htmlElements =
            document.getElementsByTagName("p");

        // Define a variable to keep track
        // of the current iteration
        let i = 0;

        // Check if the current value
        // is lesser than total elements
        while (i < htmlElements.length) {

            // Print the current element
            console.log(htmlElements[i]);

            // Increment the value
            i++;
        }
    </script>
</body>

</html>

Output:

output1
Output

Approach 3: Using the 'for.....of' statement

The for...of statement can be used to loop over values of an iterable object. It includes objects like an Array, Map, Set, or HTML elements. A temporary variable holds the current value during the execution of the loop, which can then be used in the body of the loop.

Syntax:

for (element of elements) {
    console.log(element);
}

Example: In this example, we will see the use of Using the 'for.....of' statement.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to loop through HTML
        elements without using
        forEach() loop in JavaScript ?
    </title>
</head>

<body>
    <!-- HTML elements to iterate -->
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <p>This is paragraph 3.</p>

    <script type="text/javascript">
        // Get the elements to be iterated
        let HTMLelements =
            document.getElementsByTagName("p");

        // Use the for...of statement to get
        // the values
        for (elem of HTMLelements) {

            // Print the current element
            console.log(elem);
        }
    </script>
</body>

</html>

Output:

output1
Output

Approach 4: Using the for...in statement

The for...in statement can be used to loop over the enumerable properties of an object or the indices of an array-like object. While this is not the most common use case for for...in, it can be applied to HTMLCollection to iterate over its indices.

Syntax:

for (let index in elements) {
    if (elements.hasOwnProperty(index)) {
        console.log(elements[index]);
    }
}

Example: In this example, we will see the use of the for...in statement.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <title>How to loop through HTML elements without using forEach() loop in JavaScript?</title>
</head>
<body>
      <!-- Nikunj Sonigara -->
    <!-- HTML elements to iterate -->
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <p>This is paragraph 3.</p>

    <script type="text/javascript">
        // Get the elements to be iterated
        let htmlElements = document.getElementsByTagName("p");

        // Use the for...in statement to get the indices
        for (let index in htmlElements) {
            if (htmlElements.hasOwnProperty(index)) {
                // Print the current element
                console.log(htmlElements[index]);
            }
        }
    </script>
</body>
</html>
Screenshot-2024-06-11-072723



Next Article
How to loop through HTML elements without using forEach() loop in JavaScript ?
author
akashkumarsen4
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox