Model (DOM) et les sélecteurs

Ceci est une ancienne révision du document !

Javascript permet d’agir sur les propriétés des éléments d’un document HTML, mais aussi de manipuler l’arbre DOM. Le Document Object Model (en français modèle d’objets de document), abrégé en DOM, est une interface de programmation normalisée permettant de structurer des documents HTML et XML. Ce sont les navigateurs utilisés par les internautes pour accéder aux offres du Web, qui exploitent l’interface normalisée : la plupart des clients Web utilise le DOM ou des interfaces basées sur le DOM, pour générer des pages HTML ou XML.

L’épine dorsale d’un document HTML est constituée de balises. Le Document Object Model reste pertinent comme présentation orientée objet d’un document Web. Il a aussi son intérêt comme interface pour l’ensemble des contenus dynamiques programmés, et par conséquent pour toutes les interactions servant à modifier l’aspect d’une page pendant sa création.

Selon le modèle d’objets de document (DOM), chaque balise HTML est un objet. Les balises imbriquées sont des “enfants” de celle qui les entoure. Le texte à l’intérieur d’une balise est également un objet. Tous ces objets sont accessibles via JavaScript, et nous pouvons les utiliser pour modifier la page.

Par exemple, document.body est l’objet représentant la balise <body>.

L’exécution de ce code rendra le <body> rouge pendant 3 secondes :

document.body.style.background = 'red'; 
setTimeout(() => document.body.style.background = '', 3000);

Structure arborescente.

Tout document HTML peut être représenté sous une forme arborescente Exemple :

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link href="style.css" rel="stylesheet">
        <title>Title</title>
    </head>
    <body>
        <p><strong>Hello World!</strong></p>
        <div><img src="bild.jpg"></div>
    </body>
</html>

Le code HTML généré par le DOM-Tree se présente donc ainsi :

Sur cet arbre, on distingue le nœud racine (html), puis des autres noeuds intermédiaires et des nœuds feuilles. Sous un nœud, sont situés ses descendants(child).

Par exemple, les descendants du nœud body sont p et div. Le nœud article est le parent des nœud p et div.

Les nœuds p et div sont des nœuds frères (siblings). Ils se suivent de gauche à droite, selon leur ordre d’apparition dans le document.

Autre représentation du DOM :

DOCTYPE: HTML
HTML
----head
-  ---- meta
-  ---- link
-  ---- title
----body
-  ---- p
-    ---- strong
-      ---- TEXT: Hello Wordl!
-  ---- div
-    ---- img

Les sélecteurs utilisés en CSS ou en javascript, vont pouvoir utiliser les propriétés du DOM afin de définir la cible du traitement à effectuer.

Un sélecteur permet de déterminer les éléments sur lesquels s’applique une règle de type.

* : tout élément
balise : tout élément dont la balise est <balise>, exemple article { … }
#id : tout élément dont l’attribut id vaut id
.class : tout élément dont l’attribut class vaut class

Soit E un élément de type sélecteur simple :

E[att] : tout élément dont l’attribut att est défini, exemple img[alt], *[title]
E[att=val] : tout élément dont l’attribut att vaut val, exemple : p[lang=fr]
E[att~=val] : tout élément dont l’attribut att vaut une liste de mots , dont val
E[attˆ=”prefixe”] : tout élément dont l’attribut att commence par prefixe.
E[att$=”suffixe”] : tout élément dont l’attribut att se termine par suffixe.
E[att*=”val”] : tout élément dont l’attribut att contient la sous-chaine val.

Exception pour les attributs class et id

Pour accéder à un élément dont l’attribut class est défini, utilisation du .
Pour accéder à un élément dont l’attribut id est défini, utilisation du #

Pseudo-classes :

E:pseudoC tout élément appartenant à la pseudo-classe pseudoC, exemple : a :visited, a.fichier :hover Quelques pseudo-classes :
:empty un élément sans descendant (y compris nœud texte)
:first-child un élément qui est premier fils d’un autre élément, ex : div.exercice:first-child
:last-child élément dernier fils d’un autre élément
:nth-child(an + b) élément (an + b) ème fils d’un autre élément, ex : div:nth-child(3), div:nth-child(2n), div:nth-child(even), div[img]:nth-child(3n+1)
:nth-last-child(an + b) élément (an + b) ème fils en partant de la fin
:nth-of-type(an + b) (an + b)ème élément du type sélectionné et qui ont le même père, exemple : p:nth-of-type(4n) chaque élément de type <p> dont la position parmi l'ensemble des éléments de type <p> descendants directement du même élément parent, est un multiple de 4. :not(E) élément non concerné par E, exemple p:not(.classy) tous les paragraphes, sauf ceux de classe classy
:hover élément sous le pointeur de la souris
:visited lien visité
:link lien non encore visité

Pseudo éléments :

E::pseudoE tout pseudo-élément pseudoE de l’élément E, exemple : h1 ::first-letter, p[lang=fr] ::first line

Quelques pseudo-éléments :

::first-line la première ligne d’un élément
::first-letter le première lettre d’un élément
::before insertion de contenu avant l’élément, exemple : div.rmq ::before{content : “Remarque : ” ;}
::after insertion de contenu après l’élément, exemple : a.fichier[href$= “.pdf”]::after { content : url(images/pdf-icone.gif) ;}

On dispose d’un code source html avec différentes div de classe rmq. A chaque fois qu’une nouvelle div de la classe rmq s’affiche, on souhaite la précéder du texte : Remarque x, w étant le no de la remarque

Définir un compteur dans l’élément body : #body{ counter-reset :noremarque ;} Le compteur sera incrémenté à chaque fois que la classe rmq sera rencontrée : div.rmq{ counter increment :noremarque ;}

Le compteur sera affiché avant chacune des remarques : div.rmq::before {content :“Remarque ” counter(noremarque) ;}

Sel1 Sel2 : tout élément Sel2 descendant de Sel1, exemple : article p, tous les paragraphes de article Sel1 > Sel2 : tout élément Sel2, fils de Sel1
Sel1 + Sel2 : tout élément Sel2, premier frère de Sel1
Sel1 ∼ Sel2 : tout élément Sel2 qui suit Sel1 (frère suivant)

Les fonctions javascript querySelector() et querySelectorAll() permettent de cibler des éléments en utilisant des sélecteurs avec la même syntaxe que les sélecteurs CSS.