Wie kann ich in JavaScript sicher durch „getElementsByClassName' iterieren?

So iterieren Sie richtig durch getElementsByClassName

In JavaScript gibt getElementsByClassName eine NodeList und kein Array zurück. Dies kann für Anfänger zu unerwartetem Verhalten führen, wie z. B. einer sich schnell ändernden NodeList während der Iteration.

Lösung 1: Verwenden der item()-Methode

Um eine NodeList ordnungsgemäß zu durchlaufen , können Sie die Methode item() verwenden:

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

Diese Methode gibt das i-te Element von zurück NodeList.

Lösung 2: NodeList in ein Array klonen

Alternativ können Sie die NodeList in ein Array klonen und dieses durchlaufen:

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

Diese Lösung wird bevorzugt, wenn möglicherweise verschachtelte Folien vorhanden sind, da dadurch eine statische Kopie davon erstellt wird NodeList.

Wichtiger Hinweis

Es ist wichtig zu bedenken, dass sich die NodeList ändern kann, wenn der DOM-Baum innerhalb der Distribute-Funktion geändert wird. Daher ist es wichtig, die Methode item() zu verwenden oder die NodeList zu klonen, bevor Sie das DOM ändern.

Das obige ist der detaillierte Inhalt vonWie kann ich in JavaScript sicher durch „getElementsByClassName' iterieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!