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:
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 ?
Last Updated :
24 Jan, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...