HTMLCollection for 循环
HTML 集合是一个 HTML 元素数组。我们可以使用集合中的每个元素的索引来访问它们。此外，我们还可以遍历 HTML 集合数组，逐个获取集合中的所有 HTML 元素。
有时，我们需要使用 for 循环来遍历所有 HTML 元素的集合。例如，我们创建了一组复选框，当用户按下清除按钮时，我们需要清除所有复选框。我们可以访问 HTML 集合中的所有复选框，对其进行遍历，然后取消选中所有复选框。
在本教程中，我们将学习不同类型的 for 循环来遍历 HTML 集合。
使用 for 循环
我们可以在 JavaScript 中访问多个 HTML 元素，并使用它们进行 for 循环来遍历数字或字符串数组。
我们可以在 for 循环中初始化索引变量，并在每次迭代中使用该索引访问集合元素。
语法
用户可以按照以下语法使用 for 循环遍历 HTML 集合。
for (let i = 0; i < allDivs.length; i++) {
let div = allDivs[i];
}
在上述语法中，"i"表示索引，初始化为 0，我们遍历集合，直到索引小于集合的长度。
示例 1
在下面的示例中，我们创建了 5 个 div 元素。此外，我们为每个 div 分配了相同的类名。在 JavaScript 中，我们通过类名访问所有 div 元素。
因此，allDivs 是一个 div 元素的 HTML 集合。之后，我们使用 div 元素的 innerHTML 属性来获取其内容，该内容显示在输出中。
<html>
<body>
<h2>Using the <i> for loop </i> to iterate through the HTML collections. </h2>
<div class = "divElement"> Div 1 </div>
<div class = "divElement"> Div 2 </div>
<div class = "divElement"> Div 3 </div>
<div class = "divElement"> Div 4 </div>
<div class = "divElement"> Div 5 </div>
<br>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let allDivs = document.getElementsByClassName('divElement');
output.innerHTML += "The content of all Div elements is given below <br>";
for (let i = 0; i < allDivs.length; i++) {
output.innerHTML += allDivs[i].innerHTML + "<br>"
}
</script>
</html>
使用 for-of 循环
for-of 循环也用于迭代集合或数组元素，按数组顺序返回单个数组元素。在第 i 次迭代中，它返回数组第 i 个索引处的元素。
语法
用户可以按照以下语法使用 for-of 循环迭代 HTML 集合。
for (let element of collection) {
// element 是集合的元素
}
在上述语法中，集合是包含多个 HTML 元素的 HTML 集合。
示例 2
在下面的示例中，我们创建了 HTML 的五个 <p> 元素。在 JavaScript 中，我们使用类名访问 <p> 元素。另外，我们使用了 for-of 循环来迭代集合。
此外，在迭代 HTML 集合时，我们可以访问每个 <p> 元素的内部 HTML。
<html>
<body>
<h2>Using the <i> for-of loop </i> to iterate through the HTML collections. </h2>
<p class = "pElement"> Car </p>
<p class = "pElement"> Bike </p>
<p class = "pElement"> Truck </p>
<p class = "pElement"> Cycle </p>
<p class = "pElement"> Tempo </p>
<br>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let allps = document.getElementsByClassName('pElement');
output.innerHTML += "The content of all p elements is given below <br>";
for (let element of allps) {
output.innerHTML += element.innerHTML + "<br>"
}
</script>
</html>
使用 forEach() 方法
forEach() 方法也会遍历集合中的每个元素。我们需要将集合作为引用，然后 forEach() 方法会为每个集合元素调用回调函数。
我们需要将回调函数作为 forEach() 方法的参数传递，该方法也接受集合元素作为参数，我们可以在回调函数内部使用该参数。
语法
用户可以按照以下语法使用 forEach() 方法遍历 HTML 集合。
allCheckboxes.forEach((checkbox) => {
// 这是回调函数的主体
})
在上述语法中，allCheckboxes 是一个 HTML 元素集合。
示例 3
在下面的示例中，我们创建了一组多个复选框。之后，我们使用 JavaScript 访问了所有复选框。每当用户按下按钮时，我们都使用 forEach() 方法遍历所有复选框，并使用 JavaScript 取消选中所有复选框。
<html>
<body>
<h2>Using the <i> forEach() method </i> to iterate through the HTML collections. </h2>
<label for = "check1"> Checkbox 1 </label>
<input type = "checkbox" id = "check1" value = "one" name = "check">
<label for = "check2"> Checkbox 2 </label>
<input type = "checkbox" id = "check2" value = "two" name = "check">
<label for = "check3"> Checkbox 3 </label>
<input type = "checkbox" id = "check3" value = "three" name = "check">
<label for = "check4"> Checkbox 4 </label>
<input type = "checkbox" id = "check4" value = "foruth" name = "check">
<label for = "check5"> Checkbox 5 </label>
<input type = "checkbox" id = "check5" value = "Fifth" name = "check">
<br><br>
<button onclick = "clearChecks()"> Clear </button>
</body>
<script>
let output = document.getElementById('output');
function clearChecks() {
let allCheckboxes = document.getElementsByName('check');
allCheckboxes.forEach((checkbox) => {
checkbox.checked = false;
})
}
</script>
</html>
我们学习了如何使用 JavaScript 中的 for 循环遍历 HTML 集合。我们使用了 for 循环的三种变体来遍历集合。forEach() 循环比普通的 for 循环和 for-of 循环更快，性能也更好。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
