### L'arbre DOM

Les sélecteurs nous permettent de sélectionner des éléments HTML dans la page affichée par le navigateur.

Ils peuvent avoir des formes très simples (le nom d'un élément HTML) ou très complexes pour cibler précisément des éléments HTML profondément enfoui dans les imbrications de la page.

Pour faciliter la représentation schématique de l'organisation des éléments et ainsi pouvoir mieux définir les sélecteurs, on copie le travail fait par le navigateur quand il construit en mémoire un graphe représentant la structure de données du document HTML traité.

Cette structure de donnée s'appelle le DOM (Document Object Model) et peut être visualisée sous la forme d'un arbre inversé, dont la racine est l'élément html.

Le DOM est standardisé par le W3C. Il a évolué en 3 versions :

- DOM Level 1 d'octobre 998,
- le DOM Level 2, du fait de sa complexité est divisé en plusieurs modules (novembre 2000) : Core, Events, Style, Views et Traversal and range. La spécification DOM Level 2 HTML date de janvier 2003 ;
- le DOM level 3 ne concerne pas tous les modules du 2. On a Validation, Core, Load ans Save, tous de 2004. D'autres modules sont toujours en discussion.

En simplifiant, le travail du navigateur peut être représenté par 3 étapes :

- étape 1 : le navigateur parse le code HTML et définit sa structure sous la forme d'un arbre (le DOM),
- étape 2 : le navigateur parse le code CSS et définit les propriétés applicables des différentes règles. Il accroche les sélecteurs à l'arbre DOM et définit un arbre d'affichage,
- étape 3 : le navigateur affiche les résultat de l'étape 3 à l'écran.

étapes de traitement par le navigateur

L'exemple de code suivant a l'arbre DOM représenté en figure 2.

Exemple : arbre DOM
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>L'Arrière des Etoiles</h3> <p>Les CSS sont l'arme secrète de la Force !</p> <p>Tu veux savoir les utiliser ? Envoie CSS au 7 1718.</p> <div> <p><img src="../exemples/img/yoda.jpg"> Le côté obscur des CSS redouter tu dois.</p> <p><img src="../exemples/img/darkv.jpg"> Les CSS ont vraiment transformé ma vie.</p> <p><img src="../exemples/img/gandalf.jpg"> Bien sûr, moi aussi j'utilise les CSS !</p> </div> </body> </html>
DOM de l'exemple

Les attributs des éléments ne sont jamais représentés car ils ne constituent pas des noeuds à proprement parlé.

Le contenu textuel du document HTML est représenté, généralement sous la forme d'un rond, car il constitue bien une feuille de l'arbre.

### Vocabulaire

Les graphes en forme d'arbre ont un vocabulaire bien défini pour parler de leurs composants. Ce vocabuliare doit être acquis car certaines spécifications de sélecteur y font référence.

Les noeuds ont une ou plusieurs branches. Il sont en rouge dans la figure 3. Le feuilles sont situées au bout des branches. Elles sont en vert dans la figure 3. | noeuds et feuilles
Un ancêtre est un noeud qui a un ou plusieurs enfants, petits-enfants, arrière petits-enfants, etc. Un descendant est un noeud ou une feuille qui est enfant, petit-enfant, arrière petit-enfant, etc, d'un autre noeud. | un ancêtre et ses descendants
L'élément html est l'ancêtre de tous les noeuds et feuilles d'un arbre DOM HTML.
Un enfant est le noeud ou la feuille qui est un descendant direct d'un autre noeud (1 seul niveau de hiérarchie). Un parent est un noeud qui est l'ancêtre direct d'un autre noeud ou d'une feuille (1 seul niveau de hiérarchie). | un parent et ses enfants
Des éléments adjacents (sibling) sont des noeuds ou des feuilles qui ont le même parent. | éléments adjacents