Listes de nœuds JavaScript HTML DOM
L'objet NodeList HTML DOM
Un NodeListobjet est une liste (collection) de nœuds extraits d'un document.
Un NodeListobjet est presque la même chose qu'un HTMLCollectionobjet.
Certains navigateurs (plus anciens) renvoient un objet NodeList au lieu d'une HTMLCollection pour des méthodes telles que getElementsByClassName().
Tous les navigateurs renvoient un objet NodeList pour la propriété childNodes.
La plupart des navigateurs renvoient un objet NodeList pour la méthode querySelectorAll().
Le code suivant sélectionne tous les <p>nœuds d'un document :
Exemple
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 lengthpropriété définit le nombre de nœuds dans une liste de nœuds :
Exemple
myNodelist.length
La lengthproprié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 NodeListest 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.