Pourquoi getElementsByClassName() modifie-t-il uniquement la classe de tous les autres éléments ?

Problème de ClassName avec HTMLCollection

Dans votre code JavaScript, vous utilisez getElementsByClassName() pour sélectionner des éléments avec la classe "block-default ". Cependant, comme vous l'avez remarqué, la classe ne change que pour tous les autres éléments.

Le problème réside dans la nature de la HTMLCollection renvoyée par getElementsByClassName(). C'est une collection live qui reflète l'état actuel du DOM. Lorsque vous modifiez le nom de classe d'un élément, il est supprimé de la collection, le rendant indisponible pour une sélection ultérieure.

Solution : approche itérative

Pour résoudre ce problème, vous pouvez parcourir HTMLCollection et modifier le nom de classe de chaque élément individuellement. Ce faisant, vous vous assurerez que chaque élément reçoit la classe mise à jour :

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

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

Solution alternative : ne modifiez que le premier élément

Alternativement, vous pouvez modifier le nom de classe du premier élément, car il reste dans la collection même après un changement de classe. Voici le code modifié :

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

De cette façon, il vous suffit de mettre à jour le nom de classe du premier élément, et HTMLCollection contiendra toujours tous les éléments avec la classe "block-selected".

Remarque : Itérer sur les éléments est une meilleure solution pour les scénarios pratiques où de nombreux éléments peuvent être renvoyés par getElementsByClassName() et vous besoin d'effectuer des opérations sur chacun d'eux.

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!