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

DOMString nodeName
Le nom de la balise comme <table>, <pre> etc.

DOMString nodeType
Catégorie de noeud: élément, commentaire, texte, etc.

DOMString nodeValue
La valeur du noeud lorsque cela à un sens. Tous les noeuds n'ont pas de valeur, dans ce cas, vaut null.

NamedNodeMap attributes
Liste des attributs du noeud. Lecture seule.

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.

Node parentNode
Le noeud qui contient ce noeud. Par exemple <table> pour le noeud <tr>. Le noeud Document n'a pas de parent ainsi que quelques noeuds particuliers.

NodeList childNodes
Liste de tous les noeuds directement contenus (et non les noeuds qu'ils contiennent eux-mêmes). S'il n'y a pas de noeuds contenu, la valeur est une NodeList vide (et non pas null).

Node firstChild
Premier élément contenu dans le noeud.

Node lastChild
Dernier élément dans la liste des noeuds directement contenus.

Node previousSibling
Noeud précédent dans la liste de noeuds de même niveau, dont fait partie ce noeud.

Node nextSibling
Le successeur de ce noeud.

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.

Node appendChild(Node ajouté)
Ajoute un noeud à la liste des noeuds enfants.

Node cloneNode(Boolean)
Crée une copie du noeud, avec ses attributs. Les noeuds contenus sont copiés aussi si l'argument est true, sinon seul le noeud est copié. Ce nouveau noeud est détaché de l'arborescence. Il n'a pas de parent. Si l'argument est true, cela équivaud à détacher une branche de l'arborescence.

Boolean hasAttributes()
Retourne true ou false, selon qu'il a des attributs ou non.

Boolean hasChildNodes()
Retourne true ou false selon qu'il contient d'autres noeuds ou non.

Node insertBefore(Node inséré, Node ici)
Insère le premier noeud en argument avant le second. Eventuellement le nouveau noeud prend la place dans firstChild. En retour, retourne le noeud inséré (ses attributs de noeuds tels que parentNode, etc. ont changé).
Il s'agit d'un déplacement: si le noeud inséré figurait quelque part dans l'arborescence, il y est supprimé.
Si le noeud inséré est une branche, c'est la branche entière qui est insérée (et supprimée de là où elle existait).

Node removeChild(Node supprimé)
Supprimer un noeud ou une branche. Retourne l'élément supprimé.

Node replaceChild(Node nouveau, Node ancien)
Remplace le second argument par le premier. Retourne le Node remplacé mais des attributs tel que parentNode sont changés. Cela peut être une branche. Si le noeud remplaçant existait dans l'arborescence, il y est supprimé.

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).

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

• Affichage dynamique de vidéo avec l'interface Node.
  Création dynamique de l'arborescence par utilisation des méthodes appendChild et setAttribute.

Références

• DOM. Spécification du W3C.