document.querySelectorAll を使用して選択した項目をループするときに余分な要素を回避するにはどうすればよいですか?

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

この問題は、document.querySelectorAll が配列のようなオブジェクトである NodeList を返すために発生します。ただし、NodeList は forEach のような配列メソッドをサポートしていません。

解決策:

選択した要素を適切にループするには、NodeList を配列に変換します。これを行うにはいくつかの方法があります:

1. スプレッド構文 (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 < checkboxes.length; i++) {
     // Do something with each checkbox
   }

以上がdocument.querySelectorAll を使用して選択した項目をループするときに余分な要素を回避するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。