La tarea es iterar sobre todos los elementos DOM de manera eficiente. Estas son algunas de las técnicas en su mayoría discutidas con la ayuda de JavaScript.
Enfoque 1:
- Utilice el método document.getElementsByTagName(‘*’) para seleccionar todos los elementos DOM del documento.
- Ejecute un bucle y acceda a ellos uno por uno mediante la indexación (por ejemplo, el[i] para i -ésimo elemento).
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Utilice el selector $(“*”) para seleccionar todos los elementos DOM del documento.
- Cambie cualquier propiedad del elemento aplicándolo en el selector.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Efficient way to iterate
over all DOM elements
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA