Node, élément de l'arborescence d'un document HTML

L'interface Node est définie dans la spécification DOM 2, elle permet d'accéder à la structure d'un document HTML vu comme une arborescence d'élément, et de modifier cette structure.

But de l'interface

Node représente un noeud dans l'arborescence des éléments qui composent une page HTML. On peut créer un Node, lui ajouter des sous-éléments, et l'intégrer à un autre Node de l'arborescence. On peut aussi accéder à un noeud quelconque de l'arborescence, grâce aux méthodes de document getElementById(), qui retourne un Node, ou getElementsByTagName() qui retourne une liste de Nodes.

Ses méthodes sont héritées par des éléments spécifiques de la page qui ajoutent leurs propres attributs et méthodes.

Attributs de Node

Les attributs de Node sont d'autres Nodes, et les caractéristiques propres au noeud tel que le nom de balise.

Propriétés

Atrributs qui sont d'autres noeuds

Ces attributs sont en lecture seule, mais ils peuvent changer par l'utilisation de méthodes pour ajouter ou supprimer des noeuds. Ils ont la valeur null si le noeud correspondant n'existe pas.

Exemple

On obtient un noeud par son id et la méthode de document getElementById. 
var n = document.getElementById("mynode");
var x = n.nextSibling;          // retourne le successeur du noeud mynode.

Méthodes de Node

Elles permettent de créer un document, ou de le modifier.

Exemples

Création et utilisation d'un Node en JavaScript

On peut créer un noeud avec la méthode createElement de Document ou créer un élément dérivé de Node qui héritera de ses méthodes, que l'on pourra alors utiliser sur cet élément. 

<div id="mytag">Hello!</div>

<script>
    var node = document.getElementById("mytag");
    var value = x.firstChild;
    document.write(x.tagName);
    document.write("<br>");
    document.write(value.data);
</script>

On crée un objet Node à partir d'un élément de la page. Dans le cas présent, c'est une balise <div> qui contient un autre Node au format Text, la chaîne Hello!
On lit le nom du noeud avec la propriété nodeName, et on obtient le noeud contenu avec l'attribut firstChild, alors l'interface Text permet de lire la chaîne avec la propriété data (de l'interface characterData dérivée de Text).

Hello!

Création d'un clone

Le but de cet exemple est de voir ce qu'il advient des attributs d'un Node quand on le copie avec la méthode cloneNode.

On doit prendre garde d'abord à ce que les enfants d'un noeud ne sont pas forcément les balises affichées.

On crée un table de deux lignes et de deux colonnes, et dont l'identificateur est mytag.

var x = document.getElementById("mytag");
document.write(x.tagName);	
var row1 = x.firstChild;
document.write("child is " + row1);

On voit que firstChild est un élément Text et non pas <tr> comme on le voit dans le source. Parceque les espaces entre balises sont comptés comme éléments de l'arborescence.

Démonstration montrant comment le Node copié voit ses attributs modifiés...

ligne 1 colonne 1 ligne 1 colonne 2
ligne 2 colonne 1 ligne 2 colonne 2

Code source:

<table id="mytag" width="75%" border="1">
  <tr>
    <td>ligne 1 colonne 1</td><td>ligne 1 colonne 2</td>
  </tr>
  <tr>
    <td id="trois">ligne 2 colonne 1</td><td>ligne 2 colonne 2</td>
  </tr>
</table>
var x = document.getElementById("mytag");
document.write(x.tagName);

var row1 = x.firstChild;
document.write("child is " + row1);

var list = document.getElementsByTagName("td");
document.write("nombre de td=" + list.length);

var r1c2 = list.item(2);
document.write("Child de r1c2: " + r1c2.firstChild);
document.write("Son id: ", r1c2.id);	

var value = r1c2.firstChild.data;
document.write("Sa valeur : ", value);

var node = r1c2.cloneNode(false);
document.write("Child de son clone: " + node.firtChild);
document.write("Son id: ", node.id);

Une fois le Node copié, il conserve l'ID de l'original, mais pas les attributs de l'arborescence, donc firsChild est null.

Voir aussi

Références

© 2008-2012 Xul.fr