document.querySelectorAll を使用して選択した要素を適切にループする方法

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

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

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

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

<code class="javascript">var checkboxes = document.querySelectorAll('.check');
var checkboxesArray = [...checkboxes];

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

を使用してチェックボックスをループする場合は、

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

以上がdocument.querySelectorAll を使用して選択した要素を適切にループする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。