Comment parcourir correctement les NodeLists : une solution pour getElementsByClassName ?

Itérer correctement NodeList : une solution pour getElementsByClassName

Lorsque vous travaillez avec des NodeLists, qui sont des valeurs de retour de la fonction getElementsByClassName, il est crucial d'utiliser la bonne approche d'itération pour éviter comportement inattendu comme la modification de la longueur et de l'ordre des éléments.

Comprendre les NodeLists

Contrairement aux tableaux, les NodeLists sont des collections dynamiques qui se mettent à jour dynamiquement en fonction des modifications de l'arborescence DOM. Cela signifie que le contenu de la NodeList peut changer au cours de l'itération, ce qui peut entraîner des problèmes.

Solution

Pour parcourir efficacement une NodeList, utilisez la méthode item pour accéder éléments individuels. Cela garantit que les éléments sont récupérés de la NodeList sans la modifier :

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

Exemple avec des diapositives imbriquées

Dans les cas où les diapositives sont imbriquées dans d'autres éléments, vous peut avoir besoin d'une approche alternative :

const slides = document.getElementsByClassName("slide");
const clonedSlides = [];

// Clone each slide to prevent DOM updates during iteration
for (let i = 0; i < slides.length; i++) {
  clonedSlides.push(slides.item(i).cloneNode(true));
}

// Iterate through the cloned slides and perform necessary actions
for (let i = 0; i < clonedSlides.length; i++) {
  Distribute(clonedSlides[i]);
}

En clonant les diapositives, vous créez un instantané du DOM, garantissant que le processus d'itération ne sera pas affecté par les modifications apportées à l'arborescence 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!