JavaScript で「getElementsByClassName」を安全に反復処理する方法

getElementsByClassName を正しく反復する方法

JavaScript では、getElementsByClassName は配列ではなく NodeList を返します。これにより、反復中に NodeList が急速に変化するなど、初心者にとって予期しない動作が発生する可能性があります。

解決策 1: item() メソッドを使用する

NodeList を適切に反復するには

const slides = document.getElementsByClassName("slide");
for (let i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

このメソッドは、NodeList の i 番目の要素を返します。

解決策 2: NodeList を配列に複製する

代わりに、NodeList を配列に複製し、それを反復処理することもできます。

const slides = document.getElementsByClassName("slide");
const slidesArray = Array.from(slides);
for (let slide of slidesArray) {
   Distribute(slide);
}

このソリューションは、NodeList の静的コピーを作成するため、ネストされたスライドがある場合に推奨されます。

重要な注意

Distribute 関数内で DOM ツリーを変更する場合、NodeList が変更される可能性があることを覚えておくことが重要です。したがって、DOM を変更する前に item() メソッドを使用するか、NodeList を複製することが重要です。

以上がJavaScript で「getElementsByClassName」を安全に反復処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。