Colección HTML para bucle – Barcelona Geeks

No se recomienda usar un bucle for/in para recorrer una HTMLCollection porque este tipo de bucle se usa para iterar a través de las propiedades de un objeto. HTMLCollection contiene otras propiedades que se pueden devolver junto con los elementos necesarios.

Hay 3 métodos que se pueden usar para recorrer correctamente una HTMLCollection.

Método 1: Usar el bucle for/of: El bucle for/of se usa para recorrer los valores de un objeto iterable. Esto incluye arrays, strings, nodeLists y HTMLCollections.

La sintaxis de este bucle es similar a la del bucle for/in. El objeto debe ser iterable para ser utilizado con este ciclo.

Sintaxis:

for (item of iterable) {
  // code to be executed
}

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>For loop for HTMLCollection elements</title>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>For loop for HTMLCollection elements</b>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <script type="text/javascript">
        // get a HTMLCollection of elements in the page
        let collection = document.getElementsByTagName("p");
  
        // regular for loop
        for (let i = 0; i < collection.length; i++) {
            console.log(collection[i]);
        }
    </script>
</body>
  
</html>

Salida de la consola:
forOf-console

Método 2: usar el método Array.from() para convertir HTMLCollection en un Array
El método Array.from() se usa para crear un nuevo Array a partir de un objeto similar a un arreglo o iterable. El HTMLCollection se pasa a este método para convertirlo en un Array.

El método forEach() ahora se puede usar para iterar sobre los elementos como una array y mostrarlos.

Sintaxis:

Array.from(collection).forEach(function (element) {
        console.log(element)
      });

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>For loop for HTMLCollection elements</title>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>For loop for HTMLCollection elements</b>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <script type="text/javascript">
        // get a HTMLCollection of elements in the page
        let collection = document.getElementsByTagName("p");
  
        // convert to an array using Array.from()
        Array.from(collection).forEach(function(element) {
            console.log(element)
        });
    </script>
</body>
  
</html>

Producción:
forEach-console

Método 3: Uso de un bucle for normal
Los elementos se pueden iterar mediante el uso de un bucle for normal. El número de elementos en HTMLCollection se puede averiguar utilizando la propiedad de longitud de la colección. A continuación, se ejecuta un bucle for hasta el número de elementos.

Se puede acceder a cada uno de los ítems usando corchetes con su respectivo índice.

Sintaxis:

for (let i = 0; i < collection.length; i++) {
        console.log(collection[i]);
      }

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>For loop for HTMLCollection elements</title>
</head>
  
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>For loop for HTMLCollection elements</b>
    <p>This is paragraph 1.</p>
    <p>This is paragraph 2.</p>
    <script type="text/javascript">
        // get a HTMLCollection of elements in the page
        let collection = document.getElementsByTagName("p");
  
    // using for loop
        for (let i = 0; i < collection.length; i++) {
    console.log(collection[i]);
        });
    </script>
</body>
  
</html>

Producción:
forloop-console

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta