document.querySelectorAll を使用した選択した要素のループ

Web 開発では多くの場合、選択した要素をループすることが必要になります。 document.querySelectorAll は、選択された要素を表す配列のようなオブジェクトを提供します。ただし、反復が NodeList に対して直接実行されると問題が発生する可能性があり、出力に追加の項目が表示されます。

選択した要素を適切にループするには、スプレッド構文を使用して NodeList を配列に変換します。代わりに結果の配列を反復処理することで、項目の追加を避けることができます。このメソッドは、ES2015 と Babel.js をサポートする最新の JavaScript 環境に最適です。

たとえば、document.querySelectorAll('.check'):

var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

checkboxesArray.forEach(checkbox => {
  console.log(checkbox);
});

このコード スニペットは、追加の項目なしでチェックボックス要素のみを正しく反復処理します。