Liste de nœuds DOM HTML JavaScript

NodeListL'objet est une liste de nœuds (collection) obtenue à partir du document.

L'objet NodeList est similaire à l'objetHTMLCollection.

Certaines méthodes dans les anciens navigateurs (telles que :getElementsByClassName()) renvoient un objet NodeList, et non un objet HTMLCollection.

Chez tous les navigateurs, la propriétéchildNodesrenvoie un objet NodeList.

Chez la plupart des navigateurs,querySelectorAll()renvoie un objet NodeList.

Le code suivant sélectionne tous les nœuds <p> dans le document :

Exemples

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

Les éléments d'un NodeList sont accessibles par index (en commençant à 0).

Pour accéder au deuxième élément <p>, vous pouvez utiliser le code suivant :

y = myNodeList[1];

Essayez-le vous-même »

Propriété length de l'objet NodeList

La propriété length de l'objet NodeList définit le nombre d'éléments dans la liste de nœuds.

Exemples

var myNodelist = document.querySelectorAll("p"); document.getElementById("demo").innerHTML = myNodelist.length;

Essayez-le vous-même »

Analyse de l'exemple

Obtenir une collection d'éléments <p> :

var myNodelist = document.querySelectorAll("p");

Afficher le nombre d'éléments dans la liste de nœuds :

document.getElementById("demo").innerHTML = myNodelist.length;

La propriété length est souvent utilisée pour parcourir une liste de nœuds.

Exemples

Changez la couleur d'arrière-plan de tous les éléments <p> dans la liste de nœuds :

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

Essayez-le vous-même »

Différence entre HTMLCollection et NodeList

HTMLCollectionest une collection d'éléments HTML.

NodeList est une collection de nœuds de document.

NodeList et HTMLCollection ont de nombreuses similarités.

NodeList et HTMLCollection sont tous deux assez similaires à des objets Array, et vous pouvez utiliser l'index (0, 1, 2, 3, 4, ...) pour obtenir des éléments.

NodeList et HTMLCollection ont tous deux une propriété length.

Les éléments de HTMLCollection peuvent être obtenus par nom, id ou index.

NodeList n'est accessible que par index.

Seuls les objets NodeList contiennent 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'en est pas un.

Vous pouvez utiliser un index pour obtenir des éléments, tout comme avec un tableau.

Les listes de nœuds ne peuvent pas utiliser les méthodes de tableau : valueOf(), pop(), push() ou join().

Autres extensions