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

The task is to iterate over all the DOM elements in efficient way. Here are few of the mostly techniques discussed with the help of JavaScript.

Approach 1:

Use document.getElementsByTagName(‘*’) method to select all DOM elements of the document.
Run a loop and access them one by one by indexing (Eg. el[i] for i^th element).

Example: This example implements the above approach.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        Efficient way to iterate 
        over all DOM elements 
    </title> 
</head> 
  
<body style="text-align:center;"> 
      
    <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> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Approach 2:

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

Example: This example implements the above approach.

<!DOCTYPE HTML> 
<html> 
  
<head> 
    <title> 
        Efficient way to iterate 
        over all DOM elements 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
  
<body style="text-align:center;"> 
      
    <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> 
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

My Personal Notes

Recommended Posts: