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>