Parcourir le document HTML avec l'interface DOM
#1
Parcourir le document avec Node.childNodes
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 :
- Le nom du constructeur de l'objet JavaScript correspondant à ce nœud.
- La valeur de
nodeNamequi contient le nom de la balise. - La valeur de
nodeTypequi contient une valeur de constante qui qualifie le type de nœud. - La valeur de
nodeValuequi contient par exemple le contenu textuel d'un nœud de typeText.
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
document
document.lastChild pour avoir la liste des enfants du nœud HTML.
document.lastChild.firstChild pour avoir la liste des enfants du nœud HEAD.
document.lastChild.lastChild pour avoir la liste des enfants du nœud BODY. On peut accéder directement au body en faisait document.body.
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.
document.body.childNodes[3] pour avoir le nœud Text de h1.
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.
#2
Parcourir le document avec ParentNode.children
children
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.
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
Cet outil vous permet de visualiser rapidement un arbre DOM, ce qui peut être utile en cas de recherche de bug.
