如何将所有选定元素迭代到数组中？

任务是将所有选定的 HTML 元素添加到一个数组中并遍历该数组。为此，第一步是选择所有需要的元素。有几种方法可以做到这一点。

通过 id 查找 HTML 元素：

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

按标签名称查找 HTML 元素：

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

按类名查找 HTML 元素：

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

通过 CSS 选择器查找 HTML 元素：

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

第二步涉及遍历数组。做这件事有很多种方法：

使用 for 循环。

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

使用 while 循环。

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

使用 forEach 方法。

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

方法：
首先使用querySelectorAll选择器获取所有元素。然后，使用forEach()和cloneNode()方法迭代元素。

示例 1：
在这种方法中，从第一个容器中选择所有div元素，将它们添加到第二个容器中。

使用 querySelectorAll() 获取第一个容器（list-1）中的所有 div 元素。

单击按钮（单击我！）以选择元素并将它们附加到第二个容器。

使用 querySelector() 选择第二个容器 (list-2)。

使用 forEach() 方法遍历所有 div 元素。

使用 cloneNode() 方法克隆每个 div 并使用 appendChild() 将其添加到第二个容器

  

    Demo
    
        /* 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;
        }
    

  

    GeeksforGeeks
    
        
        Element 1
        Element 2
        Element 3
    
    Click Me!
    
        
    
    
        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));
            })
        });
    

  

输出：
在点击按钮之前：

点击按钮后：

附加说明：
querySelectorAll() 不是 JavaScript 方法，它是一个允许您访问 DOM 元素的浏览器 API。此方法返回节点列表而不是数组。 NodeList 和 Array 之间的区别在于 NodeList 是一种与语言无关的访问 DOM 元素的方式，而 Array 是一个 JavaScript 对象，可用于包含内容集合。

要将 NodeList 转换为数组：

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