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

document.querySelectorAll による選択した要素のループ

document.querySelectorAll は、指定された要素に基づいて複数の要素を選択できる強力なメソッドです。 CSSセレクター。これらの選択した要素を反復するには、結果として得られる NodeList オブジェクトのニュアンスを理解することが重要です。

NodeList と Array

for を使用するときに直面した問題。 ..in ループでは、NodeList が配列ではありません。 NodeList は配列に似ていますが、item() やnamedItem() などの追加プロパティを持っています。その結果、for...in ループは要素自体に加えてこれらのプロパティを反復処理し、追加の 3 つの項目が生成されます。

ループのベスト プラクティス

この問題を回避し、正しくループするには、次のアプローチを検討してください。

インデックス付きの For ループの使用

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

for (var i = 0; i < checkboxes.length; i++) {
  // Do something with checkboxes[i]
}</code>

ForEach ループの使用(ES2015)

forEach() メソッドは、配列と NodeList を反復処理するために特別に設計されています。これにより、ループ構文が単純化され、より簡潔になります。

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

checkboxes.forEach(function(checkbox) {
  // Do something with checkbox
});</code>

NodeList を Array に変換する (ES2015)

もう 1 つの効果的な方法 (特に ES2015 環境の場合) は、次のとおりです。スプレッド構文を使用して NodeList を配列に変換します。

<code class="javascript">var div_list = document.querySelectorAll("div"); // returns NodeList
var div_array = [...div_list]; // converts NodeList to Array

div_array.forEach(function(div) {
  // Do something with div
});</code>

追加の考慮事項

• ブラウザの互換性のために、次の場合は Babel.js などのトランスパイラを使用するようにしてください。必要です。
• Node.js を使用する場合は、NodeList で .map() メソッドを利用できます。

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