Nodelist, accès au document HTML en JavaScript

L'interface NodeList est un objet DOM 2, qui permet d'accéder aux éléments d'une page Web ou d'un fichier XML. C'est un élément dynamique, tous les changements de structure dans la page modifient le contenu de NodeList.

But de l'interface

L'interface permet d'accéder aux éléments d'un document, sous forme d'une liste de Nodes. Plusieurs fonctions permettent d'obtenir des listes d'éléments, les membres de l'interface permettent de connaître leur nombre et d'accéder à chacun selon son indice dans la liste. Le plus souvent on parcourt la liste itérativement pour traiter les éléments un à un.

Attribut et méthode

NodeList a un seul attribut et une seule méthode.

Attribut

int length
Nombre de Nodes dans la liste.

Méthode

Node item(int)
Retourne le Node d'indice donné en argument. Le premier élément a l'indice 0, le dernier l'indice length - 1.

Utilisation de NodeList

NodeList permet de connaître les sous-élément d'un élément, avec la propriété childNodes de l'interface Node.

var x = document.getElementByID("nom");
var dnl = x.childNodes() 

La liste contient de façon récursive les noeuds contenus et ceux qu'ils contiennent eux-mêmes. Cette liste est mise à jour automatiquement quand la page change.

Il est aussi possible d'obtenir la liste des éléments d'un type donné dans une page Web avec la méthode getElementsByTagName().

var dnl = document.getElementsByTagName("a"); 

La commande permet d'avoir la liste des liens dans une page puisqu'ils sont introduits par la balise <a>. On obtient ensuite chacun des liens grâce à la méthode item() de NodeList.

for(i = 0; i < dnl.length; i++)
{
   var lien = dnl.item(i);
}

la méthode item() retourne un objet Node, dont le contenu n'est utilisable par ses méthodes. Ainsi si l'on veut connaître la valeur d'un attribut, on utilisera la méthode lien.getAttribute("nom") et pour obtenir le texte éventuellement contenu, on utilise la propriété innerHTML. Ce que l'on va voir dans l'exemple qui suit.

Exemple : Accéder aux liens dans une page Web

Dans une page Web contenant des liens insérés pour la démonstration, on définit une zone de stockage pour y afficher les données que l'on veut extraire de la page.

<div id="storage"></div>

La fonction lecture utilise les méthodes précédemment vues:
- document.getElementByTagName(): extraction des Nodes de tous les liens dans la page.
- item() lecture des Nodes un par un.
- getAttribute() avec en paramètre href, qui contient l'URL du lien.
- la propriété innerHTML qui pointe sur le contenu de la balise <a>, en l'occurence l'ancre du lien.

Ces données sont placées dans la variable data que l'on assigne à la propriété innerHTML de l'objet storage, pour affichage.

<script>

function lecture()
 {
     var storage = document.getElementById("storage");
     var dnl = document.getElementsByTagName("a");
     var data = "Adresses et ancres des liens<br><br>"; for(i = 0; i < dnl.length; i++)
     for(i = 0; i < dnl.length; i++)
     {
         var node = dnl.item(i);
         var url = node.getAttribute("href");
         var anchr = node.innerHTML;
         data = data + "<b>url:<i>" + url + "</i>  <b>ancre:</b><i>" + anchr + "</i><br>";
         storage.innerHTML = data;
     }
}
</script>

Démonstration

La liste des tous les liens contenus dans la page est extraite avec la méthode de Document getElementsByTagName, puis on utilise les méthodes de NodeList pour obtenir les données sur chaque lien.

Référence

• DOM 2 core. Spécification du W3C en français.