We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Les objets NodeList sont des collections de nœuds comme celles retournées par Node.childNodes et la méthode 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 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 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,  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. 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.

Propriétés

NodeList.length
Le nombre de nœuds dans la NodeList.

Méthodes

NodeList.item()
Retourne un élément de la liste par son index ou null si l'index est en dehors des limites. Équivalent à nodeList[idx] (qui renvoie à la place undefined quand  idx est hors des limites).
NodeList.entries()
renvoie un itérateur permettant de parcourir toutes les paires clé / valeur contenues dans cet objet.
NodeList.forEach()
exécute une fonction fournie une fois par élément NodeList.
NodeList.keys()
renvoie un itérateur permettant de parcourir toutes les clés des paires clé / valeur contenues dans cet objet.
NodeList.values()
renvoie un ité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'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 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 forEach(), aussi bien que entries(), values() et keys().

Il y a aussi dans Internet Explorer une façon compatible d'utiliser 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écifications

Spécification Statut Commentaire
DOM
La définition de 'NodeList' dans cette spécification.
Standard évolutif  
Document Object Model (DOM) Level 3 Core Specification
La définition de 'NodeList' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 2 Core Specification
La définition de 'NodeList' dans cette spécification.
Obsolete  
Document Object Model (DOM) Level 1 Specification
La définition de 'NodeList' dans cette spécification.
Obsolete Définition initiale.

Compatibilité des navigateurs

Nous convertissons les données de compatibilité dans un format JSON. Ce tableau de compatibilité utilise encore l'ancien format car nous n'avons pas encore converti les données qu'il contient. Vous pouvez nous aider en contribuant !

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
entries(), keys(), values(), forEach() 51 16 (maybe prior) 50 (50) Pas de support 38 10 (maybe prior)
Fonctionnalité Android Android Webview Edge Firefox Mobile (Gecko) Firefox OS (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
entries(), keys(), values(), forEach() ? ? 16 (maybe prior) 50.0 (50) ? Pas de support ? 10 (maybe prior) 51

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : madarche, loella16, uniqid, Fredchat, taorepoara
Dernière mise à jour par : madarche,