En este artículo, aprenderemos a recorrer elementos HTML sin utilizar el método forEach().
Enfoque 1: usar el bucle for : los elementos HTML se pueden iterar usando el bucle for de JavaScript normal. El número de elementos a iterar se puede encontrar usando la propiedad de longitud . El ciclo for tiene tres partes, inicialización, expresión de condición y expresión de incremento/decremento. Se puede acceder a cada uno de los ítems usando corchetes con su respectivo índice.
Sintaxis:
for (let i = 0; i < elements.length; i++) {
console.log(elements[i]);
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- HTML elements to iterate -->
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script type="text/javascript">
// Get the elements to be iterated
let htmlElements =
document.getElementsByTagName("p");
// Use a regular for-loop
for (let i = 0; i < htmlElements.length; i++) {
// Print the current element
console.log(htmlElements[i]);
}
</script>
</body>
</html>
Producción:
Enfoque 2: usar el ciclo while: los elementos HTML se pueden iterar mediante el uso de un ciclo while regular de JavaScript. El número de elementos se puede encontrar usando la propiedad de longitud . Se utiliza un valor temporal para realizar un seguimiento de la iteración actual comprobándolo en la expresión de condición. A continuación, se puede acceder a cada uno de los elementos utilizando corchetes con su respectivo índice.
Sintaxis:
let i = 0;
while(i < elements.length) {
console.log(elements[i]);
i++;
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- HTML elements to iterate -->
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script type="text/javascript">
// Get the elements to be iterated
let htmlElements =
document.getElementsByTagName("p");
// Define a variable to keep track
// of the current iteration
let i = 0;
// Check if the current value
// is lesser than total elements
while (i < htmlElements.length) {
// Print the current element
console.log(htmlElements[i]);
// Increment the value
i++;
}
</script>
</body>
</html>
Producción:
Enfoque 3: uso de la declaración ‘for…..of’: la declaración for…of se puede usar para recorrer los valores de un objeto iterable. Incluye objetos como una array, un mapa, un conjunto o elementos HTML. Una variable temporal contiene el valor actual durante la ejecución del ciclo, que luego se puede usar en el cuerpo del ciclo.
Sintaxis:
for (element of elements) {
console.log(element);
}
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<body>
<!-- HTML elements to iterate -->
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<script type="text/javascript">
// Get the elements to be iterated
let HTMLelements =
document.getElementsByTagName("p");
// Use the for...of statement to get
// the values
for (elem of HTMLelements) {
// Print the current element
console.log(elem);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por akashkumarsen4 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA