ホームページ  >  記事  >  ウェブフロントエンド  >  document.querySelectorAll() を使用して選択した要素を効果的に反復する方法

document.querySelectorAll() を使用して選択した要素を効果的に反復する方法

Susan Sarandon
Susan Sarandonオリジナル
2024-10-20 21:13:30931ブラウズ

How to Effectively Iterate Over Selected Elements with document.querySelectorAll()

document.querySelectorAll を使用して選択された要素をループする

document.querySelectorAll() の場合、一貫した数の結果を取得するのが困難になる可能性があります。これは、document.querySelectorAll() が、指定されたクエリに一致する要素以外の追加要素を含むノード リストを返すために発生します。

選択された要素を効果的にループするには、for in ループの代替メソッドを使用できます。雇用される。一般的で効率的なアプローチは、スプレッド構文を利用してノード リストを配列に変換することです。

<code class="javascript">var checkboxes = [...document.querySelectorAll('.check')];
checkboxes.forEach(checkbox => {
    // Perform actions on each checkbox element
});</code>
このアプローチでは、ノード リストを配列に変換し、forEach() のような最新のメソッドを使用できるようにします。 。これにより、追加の項目が含まれることがなくなり、ループ内で一貫した結果が保証されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。