Guide de référence de NodeList du DOM HTML

NodeList

NodeList est une collection de nœuds similaires à une liste (tableau).

Les nœuds de NodeList peuvent être accédés par index (commençant à 0).

Propriété lengthRetourne le nombre de nœuds dans NodeList.

NodeList vs. HTMLCollection

NodeList et HTMLCollection Presque identique.

Voir les explications ci-dessous sur la page.

Qui retourne NodeList ?

Propriété childNodes

Méthode querySelectorAll()

Méthode getElementsByName()

Propriétés et méthodes

Vous pouvez utiliser les propriétés et méthodes suivantes sur NodeList :

Nom Description
entries() Retournez un itérateur avec des paires clé/valeur à partir de la liste.
forEach() Exécutez une fonction de rappel pour chaque nœud de la liste.
item() Retourne le nœud à l'index spécifié.
keys() Retournez un itérateur en utilisant les clés de la liste.
length Retourne le nombre de nœuds dans NodeList.
values() Retournez un itérateur en utilisant les valeurs de la liste.

instances

Sélectionner tous les <p> Nœud :

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

Les éléments de NodeList peuvent être accédés par leur numéro d'index.

Pour accéder au deuxième nœud <p>, vous pouvez écrire :

myNodeList[1]

Essayez-le vous-même

Attention :L'index commence à 0.

Longueur de la liste de nœuds du DOM HTML

length L'attribut définit le nombre de nœuds dans la liste de nœuds :

Exemple 1

myNodelist.length

Essayez-le vous-même

Lorsque vous souhaitez parcourir les nœuds de la liste de nœuds,length L'attribut est très utile :

Exemple 2

Modifier la couleur de tous les éléments <p> de la liste de nœuds :

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

Essayez-le vous-même

Pas un tableau

Le NodeList n'est pas un tableau !

Le NodeList peut sembler comme un tableau, mais ce n'est pas le cas.

Vous pouvez parcourir NodeList et utiliser les indices pour accéder à ses nœuds.

Mais vous ne pouvez pas utiliser des méthodes d'array sur NodeList, comme push()、pop() ou join().

Les différences entre HTMLCollection et NodeList

NodeList et HTMLcollection Très similaires.

Les deux sont des collections de nœuds (éléments) extraits du document qui sont similaires à des tableaux (listes). Les nœuds peuvent être accédés par leur numéro d'index. L'index commence à 0.

Les deux ont Propriété lengthqui retourne le nombre d'éléments dans la liste (collection).

L'HTMLCollection estÉlément de documentCollection.

Le NodeList estNœud de documentCollection de (nœuds d'élément, nœuds d'attribut et nœuds de texte).

Les éléments de l'HTMLCollection peuvent être accédés par leur nom, leur id ou leur numéro d'index.

Les éléments du NodeList ne peuvent être accédés que par leur numéro d'index.

L'HTMLCollection est toujours uneEn temps réelCollection. Par exemple : si vous ajoutez un élément <li> à une liste dans le DOM, la liste dans l'HTMLCollection也会发生变化。

Le NodeList est généralement uneStatiqueCollection. Par exemple : si vous ajoutez un élément <li> à une liste dans le DOM, la liste dans le NodeList ne changera pas.

getElementsByClassName() et getElementsByTagName() La méthode retourne un HTMLCollection en temps réel.

querySelectorAll() La méthode retourne un NodeList statique.

childNodes L'attribut retourne un NodeList en temps réel.

Liste de nœuds en temps réel

Dans certains cas, le NodeList estEn temps réel：Les modifications dans le DOM mettront à jour le NodeList.

childNodes La méthode retourne un NodeList en temps réel.