Liste de nœuds HTML DOM JavaScript

Objet NodeList du HTML DOM

NodeList Les objets sont des listes de noeuds extraits du document (ensemble).

Les objets NodeList et HTMLCollection sont presque identiques.

Si vous utilisez getElementsByClassName() La méthode, certains (navigateurs anciens) retournent un objet NodeList au lieu d'un HTMLCollection.

Tous les navigateurs retournent childNodes l'attribut retourne un objet NodeList.

La plupart des navigateurs retournent querySelectorAll() La méthode retourne un objet NodeList.

Le code suivant sélectionne tous les noeuds <p> du document :

Exemple

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

Essayez-le vous-même

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

Pour accéder au deuxième noeud <p>, vous pouvez écrire ainsi :

y = myNodeList[1];

Remarque :L'index commence à 0.

Longueur de la liste de noeuds du HTML DOM

length L'attribut définit le nombre de noeuds dans la liste des noeuds :

Exemple

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

Essayez-le vous-même

Explication de l'exemple :

  • Créer une liste de tous les éléments <p>
  • Afficher la longueur de la liste

length L'attribut est très utile lorsque vous souhaitez parcourir les noeuds de la liste des noeuds :

Exemple

Changer la couleur de fond de tous les éléments <p> de la liste des noeuds :

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érences entre HTMLCollection et NodeList

HTMLCollection (chapitre précédent) est une collection d'éléments HTML.

NodeList est une collection de nœuds de document.

Les collections NodeList et HTML sont presque identiques.

Les objets HTMLCollection et NodeList sont des listes (ensembles) d'objets de type tableau (array).

Ils ont tous un nombre d'éléments définis dans la liste (ensemble). length Propriétés.

Ils peuvent tous être accédés via un index (0, 1, 2, 3, 4, ...) comme un tableau.

Pour accéder aux éléments HTMLCollection, vous pouvez utiliser leur nom, leur id ou leur numéro d'index.

Pour accéder aux éléments NodeList, vous devez utiliser leur numéro d'index.

Seuls les objets NodeList peuvent contenir des nœuds d'attribut et des nœuds de texte.

La liste de nœuds n'est pas un tableau !

Les tableaux de nœuds semblent comme des tableaux, mais ce ne sont pas.

Vous pouvez parcourir une liste de nœuds et引用其 nœuds comme un tableau.

Cependant, vous ne pouvez pas utiliser les méthodes d'array sur une liste de nœuds, par exemple valueOf()、push()、pop() ou join().