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()

私の問題は、最後にこのメソッドが3つの余分なアイテムを返すことです。どのように私はそれを適切に行うことができますか？

どのように解決するのですか？

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
}

2番目の方法は、配列の一部の要素が偽りの可能性がある場合（あなたの場合ではありません）には使えません。 [] を使う必要がないので、より読みやすくなります。