Open In App

What are the efficient ways to iterate over all DOM elements ?

Improve
Improve
Like Article
Like
Save
Share
Report

The task is to iterate over all the DOM elements in an efficient way. Here are a few of the techniques discussed with the help of JavaScript. Approach 1:

Example: This example implements the above approach. 

html




<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <p id="GFG_UP"></p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN" style="color:green;"></p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button to "
                    + "iterate over all DOM elements.";
          
        function gfg_Run() {
            var x = document.getElementsByTagName('*');
              
            for (var i = x.length; i--;) {
                x[i].style.color = "red";
            }
              
            el_down.innerHTML = "Every element has "
                        + "been traversed and color "
                        + "property has been changed.";
        }
    </script>
</body>


Output:

What are the efficient ways to iterate over all DOM elements ?

What are the efficient ways to iterate over all DOM elements ?

Approach 2:

  • Use $(“*”) selector to select all DOM elements of the document.
  • Change any property of an element by applying it to the selector.

Example: This example implements the above approach. 

html




<head>
    <script src=
    </script>
</head>
<body>
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
      
    <p id="GFG_UP"></p>
      
    <button onclick="gfg_Run()">
        Click Here
    </button>
      
    <p id="GFG_DOWN" style="color:green;"></p>
      
    <script>
        var el_up = document.getElementById("GFG_UP");
        var el_down = document.getElementById("GFG_DOWN");
        el_up.innerHTML = "Click on the button to "
                    + "iterate over all DOM elements.";
          
        function gfg_Run() {
            $("*").css("color", "red");
            el_down.innerHTML = "Every element has "
                + "been traversed and color "
                + "property has been changed.";
        }
    </script>
</body>


Output:

What are the efficient ways to iterate over all DOM elements ?

What are the efficient ways to iterate over all DOM elements ?



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