open

Parcourir le document avec l'interface DOM

#1 Parcourir le document avec Node.childNode. open

C'est assez difficile d'aborder les structures de données du DOM. Pour faciliter les choses je vais démarrer avec la partie core du niveau 2 qui est assez légère.

Pour simplifier davantage j'ai mis ci-dessous un extrait de la spécification de l'objet Node. J'ai gardé uniquement ce que l'on va voir dans la suite du chapitre. Vous avez un lien vers le document complet en français ici. Ce document n'est pas la dernière version mais pour découvrir la spécification du DOM on va prendre celui là.

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. Par exemple pour cet élément HTML l'information est stockée dans deux nœuds. Un premier nœud de type element contiendra le nom de la balise h1. Un deuxième nœud enfant du premier sera du type text et contiendra Bonjour à tous.

Ici deux types de nœud différents
Différent type de nœud

Les deux nœuds auront en commun d'être des objets enfants de l'objet Node. On peut schématiser en disant que tout ce qui relève du balisage (attributs, nom de balise) se trouve dans le nœud element et tout ce qui relève du contenu entre les balises se trouve dans le nœud text.

Extrait de la spécification de l'objet Node
Extrait de l'objet Node

Dans cette structure on trouve :

  • Des constantes qui qualifient le type de nœud.
  • Des propriétés qui permettent de fabriquer l'arbre à partir des nœuds et de naviguer dessus. En particulier la liste des nœuds enfants childNodes.
  • Des méthodes qui permettent de créer des nœuds à la demande puis de les accrocher dans l'arbre.

childNodes est assimilable à un tableau de Node. Ce n'est pas un objet de constructeur Array mais vous pouvez accéder aux éléments de manière "traditionnelle" avec [] et vous avez l'attribut length.

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. Un 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 valeurs 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 listeNode(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

Tester le code
On commence par la racine c'est à dire document
Liste des enfants de document
On prend le document.lastChild pour avoir la liste des enfants du nœud HTML.
Liste des enfants de HTML
On prend le document.lastChild.firstChild pour avoir la liste des enfants du nœud HEAD.
Liste des enfants de HEAD
On prend le document.lastChild.lastChild pour avoir la liste des enfants du nœud BODY.
Liste des enfants de BODY

Si maintenant on veut descendre sur l'élément h1 il faut prendre le troisième élément du tableau document.lastChild.lastChild.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.

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

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 dans le tableau children de body est toujours zéro.

#3 Visualiser l'arbre Node 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