document.querySelectorAll で選択した要素をループする

問題:
選択した要素をループしようとしたときdocument.querySelectorAll を使用すると、出力には無関係な追加の情報が含まれますitems.

例:

var checkboxes = document.querySelectorAll('.check');
for( i in checkboxes) {
  console.log(checkboxes[i]);
}

出力:

10
item()
namedItem()

この問題は、document.querySelectorAll が配列のようなオブジェクトである NodeList を返すために発生します。ただし、NodeList は、forEach.

Solution:

のような配列メソッドをサポートしていません。選択した要素を適切にループするには、NodeList を配列に変換します。これを行うにはいくつかの方法があります:

1. Spread Syntax (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