Comment parcourir correctement getElementsByClassName et éviter un comportement imprévisible ?

Itérer correctement via getElementsByClassName

Lorsque vous travaillez avec des pages Web, accéder aux éléments par leur nom de classe est une tâche courante. La méthode getElementsByClassName fournit une NodeList, qui représente une collection d'éléments correspondants. Cependant, parcourir une NodeList peut être délicat, en particulier lors de la modification du DOM.

Dans votre cas, vous essayez de parcourir les éléments renvoyés par getElementsByClassName("slide") et d'effectuer une action sur chaque élément. en utilisant la fonction Distribuer. Cependant, vous rencontrez un comportement imprévisible en raison de la nature changeante de la NodeList.

La solution consiste à utiliser la méthode item(index) pour récupérer des éléments individuels de la NodeList. Voici comment itérer correctement :

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

for (let i = 0; i < slides.length; i++) {
    Distribute(slides.item(i));
}

En utilisant la méthode item(), vous pouvez accéder à chaque élément de la NodeList par son index. Cela garantit que l'itération reste déterministe, même si le DOM change.

Considérations supplémentaires

Si vos éléments de diapositive peuvent être imbriqués les uns dans les autres, il est important de noter que la méthode item() renverra null pour tous les éléments imbriqués qui n'ont pas le nom de classe spécifié. Pour gérer les diapositives imbriquées, vous pouvez utiliser une technique plus avancée telle que l'interrogation de tous les éléments d'un conteneur et leur filtrage par nom de classe.

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!