{{APIRef("DOM")}}
Les objets NodeList sont des collections de nœuds comme celles retournées par {{domxref("Node.childNodes")}} et la méthode {{domxref("document.querySelectorAll()")}}.
Bien que NodeList ne soit pas un tableau (Array), il est possible d'itérer dessus en utilisant forEach(). Il peut également être converti en tableau (Array) en utilisant {{jsxref("Array.from()")}}.
Néanmoins certains vieux navigateurs n'ont pas encore implémenté NodeList.forEach() ni Array.from(). Mais ces limitations peuvent être contournées en utilisant {{jsxref("Array.forEach()", "Array.prototype.forEach()")}} (plus dans ce document).
Dans certains cas, la NodeList est une collection en direct, ce qui signifie que les changements dans le DOM sont reflétés dans la collection. Par exemple, {{domxref("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, la NodeList est une collection statique, ce qui signifie que tout changement dans le DOM n'affectera pas le contenu de la collection. {{domxref("document.querySelectorAll()")}} renvoie une NodeList 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.
NodeList.null si l'index est en dehors des limites. Équivalent à nodeList[idx] (qui renvoie à la place undefined quand idx est hors des limites).NodeList.Il est possible de boucler sur les éléments d'une NodeList 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'utiliser for… in ou for each… in pour énumérer les éléments de la liste, car cela énumère également la taille (length) et les propriétés du NodeList et cause des erreurs si votre script ne gère que les objets de type {{domxref("element")}}. De plus, for… in ne garantit pas de visiter les propriétés dans un ordre particulier.
Les boucles for… of boucleront correctement sur les objets NodeList :
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érateur {{domxref("NodeList.forEach()", "forEach()")}}, aussi bien que {{domxref("NodeList.entries()", "entries()")}}, {{domxref("NodeList.values()", "values()")}} et {{domxref("NodeList.keys()", "keys()")}}.
Il y a aussi dans Internet Explorer une façon compatible d'utiliser {{jsxref("Array.forEach()", "Array.prototype.forEach")}} pour l'itération.
var list = document.querySelectorAll( 'input[type=checkbox]' );
Array.prototype.forEach.call(list, function (item) {
item.checked = true;
});| Spécification | Statut | Commentaire |
|---|---|---|
| {{SpecName('DOM WHATWG', '#interface-nodelist', 'NodeList')}} | {{ Spec2('DOM WHATWG') }} | |
| {{SpecName('DOM3 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM3 Core') }} | |
| {{SpecName('DOM2 Core', 'core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM2 Core') }} | |
| {{SpecName('DOM1', 'level-one-core.html#ID-536297177', 'NodeList')}} | {{ Spec2('DOM1') }} | Définition initiale. |
{{Compat("api.NodeList")}}