极客教程如何将所有选定的元素迭代为数组
任务是将所有选定的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()方法将其添加到第二个容器中。
<!DOCTYPE html>
<html>
<head>
<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>
输出：
附加说明： querySelectorAll() 不是一个 JavaScript 方法，它是一个浏览器 API，可以让您访问 DOM 元素。此方法返回的是一个 Node List 而不是数组。NodeList 和数组的区别在于 NodeList 是一种与语言无关的访问 DOM 元素的方式，而数组是一个 JavaScript 对象，可以用来包含集合。
将 NodeList 转换为数组的方法：
var divsArr = Array.prototype.slice.call(divs);