getElementsByClassName による正しい反復処理

Web ページを操作する場合、クラス名で要素にアクセスするのは一般的なタスクです。 getElementsByClassName メソッドは、一致する要素のコレクションを表す NodeList を提供します。ただし、NodeList の反復処理は、特に DOM を変更する場合に注意が必要です。

あなたの場合、getElementsByClassName("slide") によって返された要素を反復処理し、各要素に対してアクションを実行しようとしています。配信機能を使って。ただし、NodeList の性質の変化により、予期しない動作が発生します。

解決策は、item(index) メソッドを使用して NodeList から個々の要素を取得することです。正しく反復する方法は次のとおりです。

const slides = document.getElementsByClassName("slide");

for (let i = 0; i 
item() メソッドを使用すると、インデックスによって NodeList 内の各要素にアクセスできます。これにより、DOM が変更されている場合でも、反復が確定的であることが保証されます。
追加の考慮事項
スライド要素を互いにネストできる場合は、次の点に注意することが重要です。 item() メソッドは、指定されたクラス名を持たないネストされた要素に対して null を返すことを確認します。ネストされたスライドを処理するには、コンテナ内のすべての要素をクエリし、クラス名でフィルタリングするなど、より高度なテクニックを使用できます。