Korrektes Durchlaufen von getElementsByClassName

Bei der Arbeit mit Webseiten ist der Zugriff auf Elemente über ihren Klassennamen eine häufige Aufgabe. Die getElementsByClassName-Methode stellt eine NodeList bereit, die eine Sammlung übereinstimmender Elemente darstellt. Das Durchlaufen einer NodeList kann jedoch schwierig sein, insbesondere wenn das DOM geändert wird.

In Ihrem Fall versuchen Sie, die von getElementsByClassName("slide") zurückgegebenen Elemente zu durchlaufen und für jedes Element eine Aktion auszuführen mithilfe der Funktion „Verteilen“. Aufgrund der sich ändernden Natur der NodeList kommt es jedoch zu unvorhersehbarem Verhalten.

Die Lösung besteht darin, die Methode item(index) zu verwenden, um einzelne Elemente aus der NodeList abzurufen. So iterieren Sie richtig:

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

for (let i = 0; i 
Mit der Methode item() können Sie über seinen Index auf jedes Element in der NodeList zugreifen. Dadurch wird sichergestellt, dass die Iteration deterministisch bleibt, auch wenn sich das DOM ändert.
Zusätzliche Überlegungen
Wenn Ihre Folienelemente ineinander verschachtelt werden können, ist dies wichtig zu beachten dass die Methode item() für alle verschachtelten Elemente, die nicht den angegebenen Klassennamen haben, null zurückgibt. Um verschachtelte Folien zu verarbeiten, können Sie eine fortgeschrittenere Technik verwenden, z. B. die Abfrage aller Elemente in einem Container und deren Filterung nach Klassennamen.