javascript - 如何使用 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 个额外的项目。我怎样才能正确地做到这一点？

Answer 1

我最喜欢使用 spread syntax将 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，因此不应该存在浏览器支持问题。