Discussion :

[senacle]

Bonjour,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
		}

[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.

[Invité]

Bonjour,

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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');
}

[senacle]

Une HTMLCollection est une liste dynamique de noeuds

Là, je comprends.

on peut résoudre ce problème avec querySelectorAll

Merci à vous deux

[NoSmoking]

on peut résoudre ce problème avec querySelectorAll

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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