Pourquoi getElementsByClassName() ne modifie-t-il que toutes les autres classes ?

Modèle de changement de classe indésirable : toutes les autres classes affectées

Vous êtes confronté à un défi lors de l'utilisation de getElementsByClassName() en JavaScript. Lorsque vous essayez de modifier la classe de chaque élément, vous rencontrez un problème où seules toutes les autres classes sont modifiées.

Cause première : modification de HTMLCollection

La cause sous-jacente de ce problème réside dans la nature du HTMLCollection renvoyé par getElementsByClassName(). Lorsque vous modifiez la classe d'un élément dans la collection, la collection elle-même est mise à jour et l'élément n'est plus inclus. Cela signifie que lorsque vous parcourez la collection, vous sautez effectivement des éléments alternatifs.

Solution : parcourir un tableau

Pour résoudre ce problème, vous pouvez parcourir un tableau de la collection d'origine plutôt que de modifier la collection au fur et à mesure. Cela garantit que vous appliquez le changement de classe à chaque élément, quelles que soient les modifications précédentes.

Code mis à jour à l'aide de la boucle For :

var blockSet = document.getElementsByClassName("block-default");
var blockSetLength = blockSet.length;

for (var i = 0; i < blockSetLength; i++) {
    blockSet[0].className = "block-selected";
}

Remarques :

• Au lieu de changer la classe de chaque élément individuellement, vous pouvez utiliser une boucle for pour parcourir les éléments et créer le changement de classe.
• Ce code mis à jour attribue la classe "block-selected" au premier élément du tableau blockSet pour chaque itération.
• En utilisant un tableau, vous évitez le problème du collection en cours de modification au cours de l'itération.

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!