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 ith 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= </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:
Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!
