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 ith 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= </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 ?
Please Login to comment...