How to find the position of HTML elements in JavaScript ?

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

Last Updated : 18 Jun, 2024

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
Approach 2: Using the While loop
Approach 3: Using the 'for.....of' statement
Approach 4: Using the for...in statement

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

How to find the position of HTML elements in JavaScript ?

akashkumarsen4

Improve

Article Tags :

Similar Reads

How to get the text without HTML element using JavaScript ?

Given an HTML document containing some elements and the task is to get the text inside an HTML element using JavaScript. There are two methods to get the text without HTML element which are listed below: Using innerText propertyUsing textContent property Using innerText property: We can use innerTex

How to find the position of HTML elements in JavaScript ?

In this article, we are given an HTML document and the task is to get the position of any element by using JavaScript. Use the following steps to get the position: Step 1: Selecting an element: Before finding the position, it is necessary to select the required HTML element. Every element in HTML is

How to get/change the HTML with DOM element in JavaScript ?

In order to get/access the HTML for a DOM element in JavaScript, the first step is to identify the element base on its id, name, or its tag name. Then, we can use inner.HTML or outer.HTML to get the HTML. Using the getElementById() method: This method gets/identifies the DOM elements using its ID an

How to Loop Through an Array in JavaScript?

Here are the various ways to loop through an array in JavaScript1. Using for LoopThe for loop is one of the most used ways to iterate over an array. It gives you complete control over the loop, including access to the array index, which can be useful when you need to modify elements or perform other

How to replace an HTML element with another one using JavaScript?

Replacing an HTML element with another using JavaScript allows for dynamic modification of webpage content without reloading the entire page. Document Object Model (DOM) is a platform and language-neutral interface that is used by programs and scripts to dynamically access the content, style, and st

How to get all ID of the DOM elements with JavaScript ?

Given a HTML document and the task is to get the all ID of the DOM elements in an array. There are two methods to solve this problem which are discusses below: Approach 1: First select all elements using $('*') selector, which selects every element of the document.Use .each() method to traverse all

How To Iterate an Array using forEach Loop in JavaScript?

Iterating through an array in JavaScript can be done in multiple ways. One of the most common methods is using the traditional for loop. The modern approach to iterate the array which is by using the forEach method. This method is different from the traditional approach as it uses a functional appro

Manipulating HTML Elements with JavaScript

JavaScript is a powerful language that can be used to manipulate the HTML elements on a web page. By using JavaScript, we can access the HTML elements and modify their attributes, styles, and content. This allows us to create dynamic and interactive web pages. Methods to Identify the elements to man

How to Get the Content of an HTML Comment using JavaScript ?

In this article, we will learn how to get the content of an HTML Comment Using Javascript. Comments are a best practice in programming and software development. In general, they can explain why a coding decision was made or what needs to be done to improve the code you're working on. HTML tags (incl

How to Apply a Function to Multiple Elements with the Same ID in JavaScript?

In HTML, the id attribute should be unique for each element. However, if there are multiple elements with the same id (which is not recommended but possible), JavaScript can still handle them using certain methods.1. Use querySelectorAllRetrieve all elements with the same id using querySelectorAll.q