Comment parcourir « getElementsByClassName » en toute sécurité en JavaScript ?

Comment parcourir correctement getElementsByClassName

En JavaScript, getElementsByClassName renvoie une NodeList, pas un tableau. Cela peut conduire à un comportement inattendu pour les débutants, comme une NodeList qui change rapidement pendant l'itération.

Solution 1 : Utiliser la méthode item()

Pour parcourir correctement une NodeList , vous pouvez utiliser la méthode item() :

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

Cette méthode renvoie le ième élément du NodeList.

Solution 2 : Cloner NodeList dans un tableau

Alternativement, vous pouvez cloner la NodeList dans un tableau et parcourir cela :

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

Cette solution est préférable lorsqu'il peut y avoir des diapositives imbriquées, car elle crée une copie statique du NodeList.

Remarque importante

Il est essentiel de se rappeler que lors de la modification de l'arborescence DOM dans la fonction Distribute, la NodeList peut changer. Par conséquent, il est crucial d'utiliser la méthode item() ou de cloner la NodeList avant de modifier le DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!