Cet article est une présentation succinte du Document Object Model, le moyen le plus pratique de parcourir du XML.

Nous verrons surtout le cas particulier du DOM intégré dans JavaScript et ses problèmes d’implémentations dans Internet Explorer

Le DOM

le DOM ou Document Object Model est un standart du W3C.

Il s’agit d’une méthodologie permettant la lecture de donnée de langage à Balise,
nottament le XML, indépendament du langage de programmation.

Les Navigateurs Web peuvent s’en servir sur le code HTML, (language proche du XML).
Le language qui va nous permettre ces manipulations est bien évidemment JavaScript, le langage de script des navigateurs web.

Comment Utiliser DOM

La méthode la plus simple est d’utiliser le Fameux DOM Inspector de Firefox.
Disponible lors de l’installation en mode avancée pour Firefox2 ou en Pluggin pour Firefox3.
Cet outils vous donnera la structure de votre site de manière clair.

Vous comprendrez alors comment vous pouvez utiliser DOM pour naviguer parmis vos balise HTML. une balise est alors un neud (NODE) de l’arbre.

Voici une liste d’arguments et fonction très utile (non exhaustive) :

• un tableau des balises filles dans un tableau : balise.childNodes (balise.childNodes.length pour le nombre de filles)
• la balise mère : balise.parentNode
• la premiere balise fille :balise. firstChild (cf Attention)
• la derniere balise fille :balise. lastChild
• methodes demandant si il y a des balise fille : balise.hasCHild()

Et vous pourrez effectuer des modifications :

• retirer une balise fille : balise.removeChild(element a supprimer)
• ajouter une balise : balise.appendChild(element a ajouter)
• inserer avant une autre balise : balise.insertBefore(element a ajouter, element qui deviendra le suivant)

A quoi sert le DOM

DOM en JavaScript sert à modifier votre code HTML/XHTML dynamiquement.
c’est l’essence même du Web 2.0.
AJax permet de récuperer du code depuis le serveur sans recharger la page.
Mais après il faut modifer l’affichage et c’est la que DOM entre en jeux.

De plus si vous voulez respecter les standarts, le code retour d’un appel ajax est en XML, et donc vous pouvez récuperer ces informations encore grace à DOM.
(Je vous rassure, même Google ne renvoie pas forcement du XML aux appels Ajax.)

Attention à Internet Explorer

Les nodes imprévus

Si entre deux balises vous mettez des espaces, des retours à la ligne, ou des tabulations, ils seront considérés comme du texte, (Object Text en javascript).

Si vous voulez utiliser DOM pour lire du code HTML, je vous conseil fortement de coller vos balises, ou d’utiliser des fonctions intermédiaire.
En effet il est possible de distinguer différents type de balise, gràce à leur attribut « nodeType », celui-ci vaut 1 pour toutes les balises et 3 lorsqu’il s’agit de texte.

Voici la liste des « nodeType » sur la bible.
A vous d’implémenter votre sur-couche d’abstraction à DOM pour pouvoir lister vos balises tranquillement.

Pour votre gouverne Internet Explorer applique déja ce filtre et ne prend donc pas en compte les espaces et autres charactères vide et texte entre les balises.

le cas particulier de firstChild

Comme d’habitude le mauvais élève est internet Explorer (IE) qui ne considère pas ou mal certains éléménts. malgré un DOCTYPE convenable.

C’est le cas de de la méthode firstChild().

Elle renverra:

• la première balise de Type display : « block », c’est à dire un DIV, Tableau …
• rien si c’est un élément de type « Inline », un lien, un espace … car IE l’ignorera.
• null si aucun élément de type « block » n’a été trouvé.

Mais gràce à la magie vous pourrez quand même accéder à la balise « inline » en utilisant

balise.childeNodes[i]
// avec i pour le numéro de la balise concernée.

(N’oubliez pas que IE ne prend pas en compte les espaces et autre charactères vides inter balise.)

Moralité: évitez firstChild, et écrivez vos balises sans les séparer.

Vous pouvez utilisez des frameworks tels que Prototype ou JQuery pour récuperer un ensemble d’éléments à partir de leur class. cela vous evitera des parcour de DOM hazardeux. (Indice de recherche : l’opérateur s’appellera $() ou $$())