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

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:

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.

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 ?

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </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 ?

Explore