NodeList, accessing HTML document in JavaScript

The NodeList interface is a DOM 2 object, which allows access to elements of a Web page or an XML file. C'est un élément dynamique, tous les changements de structure dans la page modifient le contenu de NodeList. It is a dynamic element, all changes of the structure of the page alter the content of NodeList.

Purpose of the interface
Attribute and method
Using NodeList
Example
Reference

Purpose of the interface

The interface allows access to elements of a document, as a list of 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. Several functions can obtain lists of items and the members of the interface can know their number and access each one according to its index in the list. Le plus souvent on parcourt la liste itérativement pour traiter les éléments un à un. The more often the list is scanned repeatedly to process the elements one by one.

Attribute and method

NodeList has one attribute and a single method

Attribute

int length
Number of Nodes in the list.

Method

Node item(int)
Returns the Node whose index is given as argument. Le premier élément a l'indice 0, le dernier l'indice length - 1. The first element has index 0, the last index length - 1.

Using NodeList

NodeList can see sub-element of an element with the property childNodes of the Node interface.

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

The list contains embedded nodes and those they contain themselves. Cette liste est mise à jour automatiquement quand la page change. This list is updated automatically when the page changes.

It is also possible to obtain the list of elements of a given type in a Web page with the getElementsByTagName() method.

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

This command returns a list of links on a page as they are introduced by the <a> tag. Each ite chacun des liens grâce à la méthode item () de NodeList . link then is obtained by using the item() method of NodeList.

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

The item() method returns a Node object, whose content is used by its methods. 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 . So if you want to know the value of an attribute, you can use the link.getAttribute("name") method, and to get the textual content the innerHTML property is used. Ce que l'on va voir dans l'exemple qui suit. We will see this in the following example.

Example

Processing links in a webpage

In a Web page containing links inserted for the demonstration, we define a storage area to view the data that we want to extract from the page.

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

The reading() function uses previous methods:
- document.getElementByTagName() : extraction des Node de tous les liens dans la page. -- Document.getElementByTagName(): Extracting Nodes of all the links in the page.
- item() lecture des Node un par un. -- Item() reading Nodes one by one.
- getAttribute() avec en paramètre href, qui contient l'URL du lien. -- GetAttribute() with a " href" parameter, which contains the URL.
- la propriété innerHTML qui pointe sur le contenu de la balise <a>, en l'occurence l'ancre du lien. -- Property innerHTML pointing to the <a> tag content, in this case the anchor of the link.

Ces données sont placées dans la variable data que l'on assigne à la propriété innerHTML de l'objet storage , pour affichage. These data are placed in the data variable that you assign the innerHTML property of the storage object for display.

<script>
function reading()
{
      var storage = document.getElementById("storage");
      var dnl = document.getElementsByTagName("a");
      var data = "Web adresses and anchors of links<br><br>"; 

      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>anchor:</b><i>" + anchr + "</i><br>";
          storage.innerHTML = data;
      }
}
</script>

Demo

List of all the links in the page is extracted with the getElementsByTagName Document method, then methods and attributes of NodeList are used to get data about each link.

Reference

DOM 2 core. Standard from the W3C.