Liste de nœuds JavaScript DOM


Table des matières

    Afficher la table des matières


L'objet HTML DOM NodeList

Un objet NodeList est une liste (collection) de nœuds extraits d'un document.

Un objet NodeList est presque identique à un objet HTMLCollection.

Certains navigateurs (plus anciens) renvoient un objet NodeList au lieu d'un HTMLCollection pour des méthodes comme getElementsByClassName().

Tous les navigateurs renvoient un objet NodeList pour la propriété childNodes.

La plupart des navigateurs renvoient un objet NodeList pour la méthode querySelectorAll().

Le code suivant sélectionne tous les nœuds <p> dans un document :

Exemple

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

Les éléments de la NodeList sont accessibles par un numéro d'index.

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

myNodeList[1]

Remarque : L'index commence à 0.


Longueur de la liste des nœuds HTML DOM

La propriété length définit le nombre de nœuds dans une liste de nœuds :

Exemple

myNodelist.length

La propriété length est utile lorsque vous souhaitez parcourir les nœuds d'un nœud liste:

Exemple

Changer la couleur de tous les éléments <p> dans un nœud liste:

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

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>

<p>Hello World!</p>

<p>Hello Norway!</p>

<p>Click the button to change the color of all p elements.</p>

<button onclick="myFunction()">Try it</button>

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

</body>
</html>


La différence entre une HTMLCollection et une NodeList

Une NodeList et une HTMLcollection sont à peu près la même chose.

Les deux sont des collections (listes) de nœuds (éléments) de type tableau extraites d'un document. Les nœuds sont accessibles par des numéros d'index. L'indice commence à 0.

Les deux ont une propriété length qui renvoie le nombre d'éléments dans la liste (collection).

Une HTMLCollection est une collection d'éléments de document.

Une NodeList est une collection de nœuds de document (nœuds d'éléments, nœuds d'attribut et nœuds de texte).

Les éléments HTMLCollection sont accessibles par leur nom, leur identifiant ou leur numéro d'index.

Les éléments NodeList ne sont accessibles que par leur numéro d'index.

Une HTMLCollection est toujours une collection live. Exemple : si vous ajoutez un élément

  • à une liste dans le DOM, la liste dans HTMLCollection changera également.

    Une NodeList est le plus souvent une collection statique. Exemple : si vous ajoutez un élément

  • à une liste dans le DOM, la liste dans NodeList ne changera pas.

    Les getElementsByClassName() et getElementsByTagName() les méthodes renvoient une HTMLCollection en direct.

    La méthode querySelectorAll() renvoie une NodeList statique.

    La propriété childNodes renvoie une NodeList active.


    Pas un tableau !

    Une NodeList peut ressembler à un tableau, mais ce n'est pas le cas.

    Vous pouvez parcourir une NodeList et faire référence à ses nœuds par index.

    Mais vous ne pouvez pas utiliser les méthodes Array comme push(), pop() ou join() sur une NodeList.