資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學HTMLCollection迴圈
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 is the collection’s element
}
在上述語法中，collection是一個包含多個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) => {
// 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迴圈更快，並且效能更好。
6000+ 次瀏覽
