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.
L'exemple de code suivant a l'arbre DOM représenté en figure 2.
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. |
|
|
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. |
|
| 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). |
|
|
Des éléments adjacents (sibling) sont des noeuds ou des feuilles qui ont le même parent. |
|