DOM - Liste de noeuds

Ce cours traite du type d’objet NodeList.

L’objet NodeList

Ce type d’objet retourne la liste - ou collection - des nœuds extraits d’un document. Ce type d’objet est quasiment similaire à HTMLCollection.

Exemple :

const myNodeList = document.querySelectorAll("p");

Tous les paragraphes <p> du document sont recherchés. Ensuite, celui désiré est sélectionné avec l’index.

Exemple :

myNodeList[1]

Longueur de la liste de nœuds

La propriété length retourne le nombre de nœuds contenus dans une liste de nœuds.

Exemple :

myNodelist.length

Utiliser cette propriété devient particulièrement utile lorsqu’il y a besoin de boucler sur les nœuds dans une liste de nœuds.

Exemple :

const myNodelist = document.querySelectorAll("p");
for (let i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.color = "red";
}

Cet exemple permet de changer la couleur des paragraphes contenus dans la liste de nœuds.

Différence entre HTMLCollection et NodeList