Les objetsNodeList sont des collections de nœuds comme celles retournées parNode.childNodes et la méthodedocument.querySelectorAll().

Dans certains cas, laNodeList est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple,Node.childNodes est en direct :

var parent = document.getElementById("parent");var child_nodes = parent.childNodes;console.log(child_nodes.length); // supposons "2"parent.appendChild(document.createElement("div"));console.log(child_nodes.length); // devrait afficher "3"

Dans d'autres cas, laNodeList est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection.document.querySelectorAll() renvoie uneNodeList statique.

Il est bon de garder cette distinction à l'esprit pour choisir la façon de parcourir les éléments de la liste des nœuds et, en particulier, pour mettre en cache la longueur de la liste.

Propriétés

NodeList.length

Le nombre de nœuds dans laNodeList.

Méthodes

NodeList.item()

Retourne un élément de la liste par son index ounull si l'index est en dehors des limites. Équivalent ànodeList[idx] (qui renvoie à la placeundefined quandidx est hors des limites).

NodeList.entries()

renvoie unitérateur permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.

NodeList.forEach()

exécute une fonction fournie une fois par élémentNodeList.

NodeList.keys()

renvoie unitérateur permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.

NodeList.values()

renvoie unitérateur permettant de parcourir toutes les valeurs des paires clé / valeur contenues dans cet objet.

Exemple

Il est possible de boucler sur les éléments d'uneNodeList en utilisant :

for (var i = 0; i < myNodeList.length; ++i) {  var item = myNodeList[i]; // L'appel de myNodeList.item(i) n'est pas nécessaire en JavaScript}

Ne soyez pas tenté d'utiliserfor… in oufor each… in pour énumérer les éléments de la liste, car cela énumère également la taille (length) et les propriétés duNodeList et cause des erreurs si votre script ne gère que les objets de typeelement. De plus,for… in ne garantit pas de visiter les propriétés dans un ordre particulier.

Les bouclesfor… of boucleront correctement sur les objetsNodeList :

var list = document.querySelectorAll("input[type=checkbox]");for (var item of list) {  item.checked = true;}

Les navigateurs récents prennent également en charge les méthodes d'itérateurforEach(), aussi bien queentries(),values() etkeys().

Il y a aussi dans Internet Explorer une façon compatible d'utiliserArray.prototype.forEach pour l'itération.

var list = document.querySelectorAll("input[type=checkbox]");Array.prototype.forEach.call(list, function (item) {  item.checked = true;});

Spécifications

Compatibilité des navigateurs