Pourquoi la modification des noms de classe avec `getElementsByClassName()` affecte-t-elle uniquement tous les autres éléments en JavaScript ?

className Modification de tous les autres problèmes de classe

Problème

En JavaScript, la méthode getElementsByClassName() renvoie une HTMLCollection contenant des éléments qui partagent une classe CSS spécifiée. Cependant, il a été observé que lors de l'application de modifications de classe à ces éléments, seules les classes alternatives sont affectées.

Cause

Ce problème se produit car la HTMLCollection renvoyée par getElementsByClassName() est une collection active. Cela signifie que toute modification apportée au DOM, telle que la modification des noms de classe, modifiera la collection elle-même.

À mesure que la propriété className est modifiée, l'élément est supprimé de la collection. Cela entraîne une diminution de la taille de la collection et les tentatives ultérieures d'accès au même élément à l'aide de son index peuvent entraîner l'omission d'éléments alternatifs.

Solution

Pour résoudre ce problème, il existe deux possibilités solutions :

1. Modifier uniquement le nom de classe du premier élément

Au lieu de parcourir l'intégralité de la collection HTML et de modifier le nom de classe de chaque élément, modifiez uniquement le nom de classe du premier élément.

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

2. Utilisez une structure de données de type tableau statique

Au lieu d'utiliser getElementsByClassName(), qui renvoie une collection en direct, créez une structure de données de type tableau statique. Cela peut être fait en utilisant la fonction Array.from() pour convertir HTMLCollection en un tableau normal, ou en créant manuellement un tableau et en le remplissant avec les éléments HTMLCollection.

const blockSetArray = Array.from(blockSet);

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

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!