¿Cómo iterar a través de todos los elementos seleccionados en una array?

La tarea es agregar todos los elementos HTML seleccionados en una array e iterar a través de la array. Para conseguirlo, el primer paso es seleccionar todos los elementos deseados. Hay varias maneras de hacer esto.

Encontrar elementos HTML por ID:

var myElement = document.getElementById("element-id");

Encontrar elementos HTML por nombre de etiqueta:

var myElements = document.getElementsByTagName("div");

Encontrar elementos HTML por nombre de clase:

var myElements = document.getElementsByClassName( "element-class");

Encontrar elementos HTML mediante selectores CSS:

var myElements = document.querySelectorAll("div.class-name");

El segundo paso consiste en iterar sobre la array. Hay varias maneras de hacer esto:

Uso de bucle for.

array = [ a, b, c, d, e ];
for (index = 0; index < array.length; index++) { 
    console.log(array[index]); 
}

Usando el ciclo while.

index = 0; 
array = [ a, b, c, d, e ]; 
while (index < array.length) { 
    console.log(array[index]); 
    index++; 
}

Usando el método forEach.

index = 0; 
array = [ a, b, c, d, e ]; 
array.forEach(myFunction); 
function myFunction(item, index) { 
    console.log(item); 
}

Planteamiento:
Primero usa el querySelectorAllselector para obtener todos los elementos. Luego, use los métodos forEach()y para iterar sobre los elementos.cloneNode()

Ejemplo 1:
en este enfoque, seleccione todos los divelementos del primer contenedor, agréguelos al segundo contenedor.

Use querySelectorAll() para obtener todos los elementos div en el primer contenedor (lista-1).

Haga clic en el botón (Click Me!) para seleccionar los elementos y agregarlos al segundo contenedor.

Seleccione el segundo contenedor (lista-2) usando querySelector().

Recorra todos los elementos div usando el método forEach().

Clone cada div usando el método cloneNode() y agréguelo al segundo contenedor usando appendChild()

<!DOCTYPE html>
<html>
  
<head>
    <title>Demo</title>
    <style>
        /* Basic styling */
          
        html {
            text-align: center;
            display: block;
            margin: 0 auto;
        }
          
        h1 {
            color: green;
            text-align: center;
        }
          
        .list-1,
        .list-2 {
            width: 240px;
            height: 120px;
            text-align: center;
            display: block;
            margin: 0 auto;
            background: lightgreen;
            border: 1px solid #000;
        }
          
        div,
        button {
            width: 80px;
            height: 20px;
            margin: 14px 78px;
            color: #fff;
            background: green;
            border: 1px solid #000;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <div class="list-1">
        <!-- select elements from here -->
        <div>Element 1</div>
        <div>Element 2</div>
        <div>Element 3</div>
    </div>
    <button>Click Me!</button>
    <div class="list-2">
        <!-- add the selected elements here -->
    </div>
    <script>
        var divs = document.querySelectorAll('.list-1 > div');
        var button = document.querySelector('button');
        button.addEventListener("click", () => {
            var list_2 = document.querySelector('.list-2');
            divs.forEach((div) => {
                list_2.appendChild(div.cloneNode(true));
            })
        });
    </script>
</body>
  
</html>

Salida:
Antes de hacer clic en el botón:

Después de hacer clic en el botón:

Nota adicional:
querySelectorAll() no es un método de JavaScript, es una API de navegador que le permite acceder a elementos DOM. Este método devuelve una lista de Nodes y no una array. La diferencia entre NodeList y Array es que NodeList es una forma independiente del idioma de acceder a los elementos DOM, y Array es un objeto de JavaScript que puede usar para contener colecciones de cosas.

Para convertir una lista de Nodes en una array:

var divsArr = Array.prototype.slice.call(divs);

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta