HTML 循环的HTML集合
HTML集合是一个HTML元素的数组。我们可以使用它的索引来访问集合中的每个元素。此外,我们还可以遍历HTML集合的数组,逐一获取集合中的所有HTML元素。
有时,我们需要使用for循环来迭代所有的HTML元素集合。例如,我们创建了一组复选框,当用户按下清除按钮时,我们需要清除所有复选框。我们可以访问HTML集合中的所有复选框,遍历它,并取消每个复选框。
在本教程中,我们将学习不同类型的for循环来遍历HTML集合。
使用for循环
我们可以在JavaScript中访问多个HTML元素,并使用它们进行循环,以迭代一个数字或字符串数组。
我们可以在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 is the collection’s element
}
在上述语法中,一个集合是一个包含多个HTML元素的HTML集合。
例2
在下面的例子中,我们已经创建了HTML的五个
元素。在JavaScript中,我们使用类名来访问
元素。同时,我们使用for-of循环来遍历这些集合。
而且,在迭代HTML集合时,我们可以访问每个
元素的内部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) => {
// this is the body of the callback function
})
在上述语法中,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循环更快,性能更好。