如何使用 document.querySelectorAll 遍历选定的元素

Question

我正在尝试循环使用 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()

我的问题是最后这个方法返回 3 个额外的项目。我怎样才能正确地做到这一点？

原文由 Hadi Mostafapour 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

for in 不建议将循环用于数组和类似数组的对象 - 你明白为什么。不仅可以有数字索引项，例如 length 属性或某些方法，但是 for in 将遍历所有这些项。使用任一

for (var i = 0, len = checkboxes.length; i < len; i++) {
    //work with checkboxes[i]
}

或者

for (var i = 0, element; element = checkboxes[i]; i++) {
    //work with element
}

如果数组中的某些元素可能是虚假的（不是您的情况），则不能使用第二种方法，但可以更具可读性，因为您不需要在任何地方使用 [] 符号。

原文由 duri 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我最喜欢的是使用 扩展语法 将 NodeList 转换为数组，然后使用 forEach 进行循环。

 var div_list = document.querySelectorAll('div'); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array
div_array.forEach(div => {

// do something awesome with each div

});

我在 ES2015 中编写代码并使用 Babel.js，因此不应该存在浏览器支持问题。

原文由 Thoran 发布，翻译遵循 CC BY-SA 4.0 许可协议