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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button: