使用 document.querySelectorAll 循環選定的項目時如何避免額外元素？

使用document.querySelectorAll 循環選取的元素

問題：

問題：嘗試循環循環選擇的元素元素時使用document.querySelectorAll，輸出包含額外的、不相關的項目。

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

範例：

<input id="check-1" class="check" type="checkbox" name="check">
<input id="check-2" class="check" type="checkbox" name="check">
<input id="check-3" class="check" type="checkbox" name="check">
<input id="check-4" class="check" type="checkbox" name="check">
<input id="check-5" class="check" type="checkbox" name="check">
<input id="check-6" class="check" type="checkbox" name="check">
<input id="check-7" class="check" type="checkbox" name="check">
<input id="check-8" class="check" type="checkbox" name="check">
<input id="check-9" class="check" type="checkbox" name="check">
<input id="check-10" class="check" type="checkbox" name="check" checked="">

10
item()
namedItem()

輸出：

問題的出現​​是因為document. NodeList，它是一個類似陣列的物件。但是，NodeList 不支援 forEach 等數組方法。

解決方案：

1. 要正確循環遍歷所選元素，請將 NodeList 轉換為陣列。有幾種方法可以做到這一點：

   const divs = [...document.querySelectorAll('div')];
   divs.forEach((div) => {
     // Do something with each div
   });

擴充語法（ES2015）：

2. const divs = Array.from(document.querySelectorAll('div'));
   divs.forEach((div) => {
     // Do something with each div
   });

Array.from():

3. const checkboxes = document.querySelectorAll('.check');
   for (let i = 0; i < checkboxes.length; i++) {
     // Do something with each checkbox
   }

循環節點索引：

循環節點索引：

以上是使用 document.querySelectorAll 循環選定的項目時如何避免額外元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！