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

document.querySelectorAll を使用した選択された要素のループ 効果的なアプローチ

document.querySelectorAll は、指定された基準に基づいて複数の要素を選択する強力な方法を提供します。ただし、開発者は、選択した要素を効率的に反復処理する際に課題に遭遇することがよくあります。

従来の for..in ループを使用する場合、返されるオブジェクトには 3 つの追加プロパティが含まれていることを認識することが重要です: item() 、namedItem()、および長さ。ループ内に意図しないインクルードが含まれないようにするには、より効果的なアプローチの採用を検討してください。

代替ループ手法

より正確なループ エクスペリエンスを確保するには、次の代替手法を検討してください。

• forEach with Spread Syntax: document.querySelectorAll によって返される NodeList オブジェクトをスプレッド構文を使用して配列に変換すると、forEach メソッドを便利に使用して各要素を反復処理できます。

var div_list = document.querySelectorAll('div');
var div_array = [...div_list];
div_array.forEach(div => {
  // Do something with each div
});

• Array.from(): あるいは、Array.from() メソッドを利用して NodeList から新しい配列を作成することもできます。

var divs = Array.from(document.querySelectorAll('div'));
divs.forEach(div => {
  // Do something with each div
});

これらのテクニックは、より洗練されたループ エクスペリエンスを提供し、不要なプロパティを排除し、選択した要素自体の操作に集中できるようにします。

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