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 :
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.
La propriété length
définit le nombre de nœuds dans une liste de nœuds :
myNodelist.length
La propriété length
est utile lorsque vous souhaitez parcourir les nœuds d'un nœud liste:
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>
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 NodeList est le plus souvent une collection statique. Exemple : si vous ajoutez un élément
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.
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.