Liste de nœuds JavaScript DOM
L’objet NodeList HTML DOM
UN NodeList objet est une liste (collection) de nœuds extraits d’un document.
UN NodeList objet est presque le même qu’un HTMLCollection objet.
Certains navigateurs (plus anciens) renvoient un objet NodeList au lieu d’une HTMLCollection pour des méthodes telles que 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 <p> nœuds 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
vous pouvez écrire :
maListeNode[1]
Essayez-le vous-même »
Note: L’indice commence à 0.
Longueur de la liste des nœuds HTML DOM
Le length La propriété définit le nombre de nœuds dans une liste de nœuds :
Le length La propriété est utile lorsque vous souhaitez parcourir les nœuds d’une liste de nœuds :
Exemple
Modifiez la couleur de tous les éléments
dans une liste de nœuds :
const myNodelist = document.querySelectorAll(« p »);
for (let i = 0; i < myNodelist.length; i++) {
myNodelist[i].style.color = « rouge » ;
}
Essayez-le vous-même »
La différence entre une HTMLCollection et une NodeList
UN Liste de nœuds Et un Collection HTML c’est à peu près la même chose.
Les deux sont des collections de type tableau (listes) de nœuds (éléments) extraits d’un document. Les nœuds sont accessibles par des numéros d’index. L’indice commence à 0.
Les deux ont un longueur propriété qui renvoie le nombre d’éléments dans la liste (collection).
Une HTMLCollection est une collection de éléments de documents.
Une NodeList est une collection de nœuds de document (nœuds d’élément, 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 en direct collection. Exemple : Si vous ajoutez un élément
Une NodeList est le plus souvent une statique collection. Exemple : si vous ajoutez un élément
Le getElementsByClassName() et getElementsByTagName()
Les méthodes renvoient une HTMLCollection en direct.
Le querySelectorAll() La méthode renvoie une NodeList statique.
Le childNodes La propriété 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 telles que push(), pop() ou join() sur une NodeList.
#Liste #nœuds #JavaScript #DOM
