Cómo recorrer elementos HTML sin usar Foreach Loop en JavaScript?
Bien! El bucle a través de los elementos HTML es una tarea muy común, por lo que JavaScript ofrece múltiples enfoques que pueden usarse para este propósito (i.mi. Elementos de bucle a través de).
Este artículo explicará cómo recorrer elementos HTML sin usar foreach () bucle en JavaScript y, en este sentido, cubrirá los enfoques que cotizan a continuación:
- Bucle a través de elementos HTML usando JavaScript for-loop
- Bucle a través de elementos HTML usando JavaScript para el bucle/declaraciones
- Bucle a través de elementos HTML usando JavaScript mientras bucle
Entonces empecemos!
Bucle a través de elementos HTML usando JavaScript for-loop
En JavaScript, uno de los enfoques más utilizados para pasar a través de elementos HTML es el bucle.
Ejemplo: Elemento de bucle
En este programa, pasaremos a través de elementos de etiqueta HTML usando JavaScript for-loop:
Html
Aquí está el resumen del archivo HTML:
- Creé dos etiquetas de "etiqueta" i.mi. Nombre y apellido.
- Utilizado el
Etiquetas para agregar descansos de línea. - Creó dos campos de entrada y un botón.
Javascript
var traverse_element = documento.getElementsBytagName ("etiqueta");para (var i = 0; i < traverse_Element.length; i++)
consola.log ("Elemento actual", traverse_element [i]);
El archivo JavaScript ejecutó las siguientes tareas:
- Utilizó el método "getElementsByTagName" para obtener la recopilación del elemento especificado (I.mi. Elemento de la etiqueta en nuestro caso).
- Utilizó el for-bucle para iterar los elementos HTML.
- Utilizó la propiedad de longitud para obtener el número de elementos HTML a iterarse/atravesar.
- Impreso el elemento actual usando la consola.Método log ().
Producción:
La salida aclaró que el bucle for-bordes atravesado a través de todos elementos.
Bucle a través de elementos HTML usando JavaScript para el bucle/declaraciones
El bucle de For-Of es una nueva adición en JavaScript introducida en las últimas versiones del ES6. Nos permite iterar sobre los objetos iterables, como matrices, cuerdas, conjuntos, etc.
Ejemplo: Elemento de bucle
En este programa, pasaremos a través de elementos del botón HTML usando el bucle JavaScript para el bucle:
Html
Los archivos HTML seguirán siendo el mismo que en el ejemplo anterior.
Javascript
var traverse_element = documento.getElementsBytagName ("botón");para (elemento de traverse_element)
consola.log (elemento);
Esta vez utilizamos las declaraciones de For-of para recorrer todos los elementos:
Así es como se usa el bucle para atravesar elementos HTML.
Bucle a través de elementos HTML usando JavaScript mientras bucle
Podemos usar el JavaScript mientras bucle para iterar a través de los elementos HTML. El ejemplo dado a continuación lo guiará sobre cómo usar el bucle "while" para iterar a través de los elementos HTML:
Ejemplo: recorra todos los elementos
En este programa, recorreremos todos los elementos HTML usando JavaScript mientras bucle:
var traverse_element = documento.getElementsBytagName ("*");Var contador = 0;
mientras (contador < traverse_Element.length)
consola.log (traverse_element [i]);
contador ++;
En este programa de ejemplo, pasamos el método "*" al método "getElementBytagName ()" para iterar a través de todos los elementos HTML. A continuación, utilizamos la propiedad de longitud dentro del bucle While para obtener el número de elementos HTML a iterados/atravesados.
Así es como podemos recorrer elementos HTML sin usar el método foreach () en JavaScript.
Conclusión
JavaScript ofrece múltiples enfoques que no sean foreach Loop que se pueden usar para recorrer elementos HTML, como el bucle, el bucle para el bucle y el bucle. Al pasar por los elementos HTML, el método "getElementsByTagName" se puede usar para obtener la recopilación del elemento especificado. Esta publicación explicó el funcionamiento de varios enfoques para recorrer elementos HTML en JavaScript.