Discussion :

[ypcman]

Bonjour.
Je souhaite boucler sur une NodeList. Avec la boucle for en commentaire, ça fonctionne parfaitement, avec le forEach non ...
j'obtiens le message d'erreur :

Uncaught TypeError: puce2.forEach is not a function

Code :

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

1
2
3
4
5
6
  puce2 = liste1[i].getElementsByTagName("dd");
  puce2.forEach(function(e) {e.style = "background : cyan";});
  /*for (k = 0; k < puce2.length; k++) {
    puce2[k].style = "background : lightcyan";
  }*/
}

J'ai pourtant l'impression d'avoir codé correctement : https://www.w3schools.com/jsref/met_...st_foreach.asp

[SpaceFrog]

e = event ..

https://jsfiddle.net/14jLvzrm/

[ypcman]

oui, bien sûr ...
Cette 1° erreur étant réparée, j'obtiens pourtant la même erreur.
J'ai copié-collé ton code à un autre endroit du script avec la même erreur :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
xx = document.getElementsByTagName("table")[0].getElementsByTagName("tr");
 
xx.forEach(
function(elt){
   console.log(elt);
   elt.style.backgroundColor="cyan";
   });
// xx.forEach(function(elt) {elt.style="background : lightcyan";});
/*
for (i = 1; i < x.length; i++) {
  xx[i].style = "background : lightcyan";
};*/

La boucle for commentée fonctionne mais pas le forEach

[SpaceFrog]

Fait peter le source du html correspondant que je puisse tester ...

[SpaceFrog]

Curieusement il semble que getElementsByName retourne un nodeList
Alors que getElementByTagName retourne une collection HTML
https://jsfiddle.net/d82e9ts0/

[ypcman]

survol.html

[ypcman]

Curieusement il semble que getElementsByName retourne un nodeList
Alors que getElementByTagName retourne une collection HTML
https://jsfiddle.net/d82e9ts0/

C'est surement ça !
Du coup, le forEach ne passe pas sur une collection ...

[SpaceFrog]

Une solution est de passer par un Array :

Code :

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

1
2
3
4
5
6
7
xxx= Array.from(document.getElementsByTagName("tr"));
console.log(xxx);
xxx.forEach(
function(elt){
   console.log(elt);
   elt.style.backgroundColor="cyan";
   });

ce qui convertit ta collection HTML en array sur lequel tu peux alors appliquer le forEach

[ypcman]

Merci ! c'est parfait!

[SpaceFrog]

Une autre solution à mon avos meilleure est d'utiliser querySelectorAll :

Code :

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

x= document.getElementsByTagName("table")[0].querySelectorAll("tr");

qui du coup te retourne un NodeList qui accepte le forEach

[NoSmoking]

Bonjour,

Curieusement il semble que getElementsByName retourne un nodeList
Alors que getElementByTagName retourne une collection HTML

Tout à fait et une HTMLCollection n'est pas itérable, j'avais expliqué cela dans cette discussion

Une solution est de passer par un Array

une écriture moderne serait

Code :

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

const arrayCollection = [... document.getElementsByTagName("tr")];

par contre pour un élément <table> on peut récupérer directement les <tr> via la propriété rows qui est une HTMLCollection !

[SpaceFrog]

Oui je sais je ne sui pas moderne ... C'est l'age que voulez vous

Mais bon querySelectorAll me semble la bonne solution ...