link W3C close

Parcourir le document HTML avec l'interface DOM

#1 Parcourir le document avec Node.childNodes open

Dans ce chapitre, on va parcourir l'arbre et on va donc voir comment est répartie l'information à travers les différents types de nœuds. Comprendre comment est répartie l'information, nous permettra de la retrouver plus facilement.

Le script ci-dessous, contient une fonction qui affiche la liste des nœuds enfants d'un nœud de l'arbre. Le nœud en question est passé en paramètre. Une boucle parcourt le tableau childNodes et affiche pour chaque nœud enfant :

  1. Le nom du constructeur de l'objet JavaScript correspondant à ce nœud.
  2. La valeur de nodeName qui contient le nom de la balise.
  3. La valeur de nodeType qui contient une valeur de constante qui qualifie le type de nœud.
  4. La valeur de nodeValue qui contient par exemple le contenu textuel d'un nœud de type Text.

On va parcourir notre document, nœud par nœud, en partant de la racine, en appelant la fonction printChildNodes(document). On descendra ensuite, dans l'arbre, en nous servant des propriétés firstChild et lastChild.

La propriété nodeValue peut contenir des caractères non imprimables. On la passera donc à travers la fonction escape, pour pouvoir les visualiser.

Les valeurs hexa, qui vont nous être utiles, sont les suivantes %0A pour line feed, %09 pour horizontal tab et %20 pour space

On commence par la racine c'est à dire document
Liste des enfants de document
Tester le code
Puis on descend dans l'arbre
Parcours de l'arbre
On prend le document.lastChild pour avoir la liste des enfants du nœud HTML.
Liste des enfants de HTML
Tester le code
On prend le document.lastChild.firstChild pour avoir la liste des enfants du nœud HEAD.
Liste des enfants de HEAD
Tester le code
On prend le document.lastChild.lastChild pour avoir la liste des enfants du nœud BODY. On peut accéder directement au body en faisait document.body.
Liste des enfants de BODY
Tester le code

Si maintenant, on veut descendre sur l'élément h1, il faut prendre le troisième élément du tableau document.body.childNodes[3]. Il faut remarquer ici que si on supprime le commentaire dans le code HTML, l'indice de h1 sera changé.

Bien sûr, ce genre de chose peut être gênant et vous pouvez faire un parcours en testant le type des nœuds et vous en sortir. Pour nous aider, un tableau children a été ajouté au niveau 3 du DOM et ne contient que les nœuds éléments. On va le voir dans ce qui suit.

On prend le document.body.childNodes[3] pour avoir le nœud Text de h1.
Neoud texte de H1 en position 3
Tester le code

En ce qui concerne notre arbre, vous avez ci-dessous un schéma simplifié de notre document. Les nœuds terminaux ne sont pas sur le schéma pour ne pas le surcharger.

Arbre avec childNodes
Arbre construit avec childNodes

#2 Parcourir le document avec ParentNode.children open

Parcours avec children
Parcours avec children
Tester le code

Ci-dessous la spécification de l'objet ParentNode. Parent car ce sont les nœuds qui ont des enfants, c'est-à-dire les nœuds de type element.

Extrait de la spécification de l'objet (* ParentNode)
Extrait de l'objet ParentNode
Arbre avec children
Arbre construit avec children

On constate ici, l'intérêt du tableau children, en notant que la position de l'élément h1 est toujours zéro, dans le tableau children du nœud body.

#3 Visualiser l'arbre DOM avec un outil open

Cet outil vous permet de visualiser rapidement un arbre DOM, ce qui peut être utile en cas de recherche de bug.

Arbre avec dom-viewer
Arbre construit avec l'outil domViewer