如何使用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

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
}

如果数组中的某些元素可能是虚假的（不是您的情况），则无法使用第二种方法，但是由于您不需要在[]所有地方都使用表示法，因此第二种方法更具可读性。