Changement de classe d'élément

Version imprimable

Bonjour,

J'ai constaté un fonctionnement qui me surprend et dont je ne comprends pas pourquoi il se produit.
Code:

1 2 3 4 5 6 var liste_nomenclature_button = document.getElementsByClassName('arrow_bottom'); for(i=0; i < liste_nomenclature_button.length; i++) { liste_nomenclature_button[i].classList.add('arrow_left'); liste_nomenclature_button[i].classList.remove('arrow_bottom'); }
Avec le code ci-dessus, par exemple, si liste_nomenclature_button contient 6 éléments
On fait d'abord add sur liste_nomenclature_button[0]
liste_nomenclature_button ne contient alors plus que 5 éléments !?!?!?!?
Ces éléments sont renumérotés de 0 à 4 dans liste_nomenclature_button
le remove se fait alors sur liste_nomenclature_button[0], qui était en fait le liste_nomenclature_button[1] d'avant
Il y a donc un décalage.

Une explication ?

En faisant deux boucles successives, les opérations se font correctement.
Code:

1 2 3 4 5 6 7 for(i=0; i < liste_nomenclature_button.length; i++) { liste_nomenclature_button[i].classList.add('arrow_left'); } for(i=0; i < liste_nomenclature_button.length; i++) { liste_nomenclature_button[i].classList.remove('arrow_bottom'); }

13/01/2020, 12h39
NoSmoking

Bonjour,

• Les méthodes document.getElements.......() renvoient une HTMLCollection.

Une HTMLCollection est une liste dynamique de noeuds, elle est automatiquement mise à jour en cas de suppression/ajout d'éléments, correspondant aux critères, dans le DOM, en d'autres termes tout changement dans le DOM affecte le contenu de la Collection.

Toutes les explications, ou presque, sont données dans cette cette discussion.

Bonjour,

on peut résoudre ce problème avec .querySelectorAll() :

Citation:

La méthode querySelectorAll() de Element renvoie une NodeList statique représentant une liste des éléments du document qui correspondent au groupe de sélecteurs spécifiés.
Code:

1 2 3 4 5 6 var liste_nomenclature_button = document.querySelectorAll('.arrow_bottom'); for(i=0, lg=liste_nomenclature_button.length; i < lg; i++) { liste_nomenclature_button[i].classList.add('arrow_left'); liste_nomenclature_button[i].classList.remove('arrow_bottom'); }

13/01/2020, 15h40
senacle

Citation:

Envoyé par NoSmoking

Une HTMLCollection est une liste dynamique de noeuds

Là, je comprends.

Citation:

Envoyé par jreaux62

on peut résoudre ce problème avec querySelectorAll

Merci à vous deux :)

Citation:

Envoyé par jreaux62

on peut résoudre ce problème avec querySelectorAll

ou encore utiliser une « boucle inverse » comme on le faisait jadis :D

Code:

1
2
3
4
5
6
7
8
const supClass = "sup-classe";
const addClass = "add-classe";
const elements = document.getElementsByClassName(supClass);
 
for (let ind = elements.length - 1; ind > -1; ind -= 1) {
  elements[ind].classList.add(addClass);
  elements[ind].classList.remove(supClass);
}

Code:

1
2
3
4
5
6
7
8
9
const supClass = "sup-classe";
const addClass = "add-classe";
const elements = document.getElementsByClassName(supClass);
let ind = elements.length;
 
while (ind--) {
  elements[ind].classList.add(addClass);
  elements[ind].classList.remove(supClass);
}

... par exemple