Listes de nœuds HTML DOM
Liste de nœuds
Une NodeList est une collection (liste) de type tableau d'objets nœuds.
Les nœuds d'une NodeList sont accessibles par index (commence à 0).
renvoie le nombre de nœuds dans une NodeList.
Une NodeList est presque identique à une HTMLCollection .
Exemples
De nombreuses méthodes et propriétés renvoient une NodeList :
Exemple
Sélectionnez tous les <p>
nœuds d'un document :
const myNodeList = document.querySelectorAll("p");
Les éléments de la NodeList sont accessibles par un numéro d'index.
Pour accéder au deuxième nœud <p> vous pouvez écrire :
myNodeList[1]
Remarque : L'indice commence à 0.
Longueur de la liste des nœuds HTML DOM
La length
propriété définit le nombre de nœuds dans une liste de nœuds :
Exemple
myNodelist.length
La length
propriété est utile lorsque vous souhaitez parcourir les nœuds d'une liste de nœuds :
Exemple
Modifiez la couleur de tous les éléments <p> dans une liste de nœuds :
const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = "red";
}
La différence entre une HTMLCollection et une NodeList
Un HTMLCollection
(chapitre précédent) est une collection d'éléments HTML.
A NodeList
est une collection de nœuds de document.
Une NodeList et une collection HTML sont à peu près la même chose.
Un objet HTMLCollection et un objet NodeList sont tous deux une liste (collection) d'objets de type tableau.
Les deux ont une propriété de longueur définissant le nombre d'éléments dans la liste (collection).
Les deux fournissent un index (0, 1, 2, 3, 4, ...) pour accéder à chaque élément comme un tableau.
Les éléments HTMLCollection sont accessibles par leur nom, leur identifiant ou leur numéro d'index.
Les éléments NodeList ne sont accessibles que par leur numéro d'index.
Seul l'objet NodeList peut contenir des nœuds d'attribut et des nœuds de texte.
Une liste de nœuds n'est pas un tableau !
Une liste de nœuds peut ressembler à un tableau, mais ce n'est pas le cas.
Vous pouvez parcourir la liste des nœuds et vous référer à ses nœuds comme un tableau.
Cependant, vous ne pouvez pas utiliser les méthodes Array, telles que valueOf(), push(), pop() ou join() sur une liste de nœuds.