使用 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.querySelectorAll 返回一个 NodeList，它是一个类似数组的对象。但是，NodeList 不支持 forEach 等数组方法。

解决方案：

要正确循环遍历所选元素，请将 NodeList 转换为数组。有几种方法可以做到这一点：

1. 扩展语法（ES2015）：

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

2. Array.from():

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

3. 循环节点索引：

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

以上是使用 document.querySelectorAll 循环选定的项目时如何避免额外元素？的详细内容。更多信息请关注PHP中文网其他相关文章！