Model (DOM)

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);

L’arbre DOM (Document Object Model)

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.

⇒ Explorer le DOM avec les outils de développement du navigateur

Ressources et compléments

https://fr.javascript.info/dom-nodes https://www.ionos.fr/digitalguide/sites-internet/developpement-web/document-object-model-dom/

Agir sur les éléments et manipuler le DOM

Sélection d’éléments

Pour manipuler les éléments d’une page, il faut au préalable les sélectionner. La sélection d’éléments peut se faire

  • Par son attribut id : var element = document.getElementById(“idElement”);
  • Par son attribut classe : var classList = document.getElementsByClassName(“nomClasse); classList se manipulera comme un tableau
  • Par sa balise : var lesDiv = document . getElementsByTagName (“div”); lesDiv se manipulera aussi comme un tableau

  • Par un sélecteur css : var element = document.querySelector(“table td .ztValeur”);
    • querySelector retourne le 1er élément correspondant au sélecteur
    • querySelectorAll retourne tous les éléments correspondant au sélecteur, dans un tableau

Remarque : querySelector et querySelecteurAll sont moins performants que leurs équivalents getElement…

Propriétés des éléments

Les éléments obtenus par sélection possèdent des propriétés manipulables : attributs, contenu, style css.

Manipuler les attributs

Les attributs html des éléments sont accessibles : element.attribut

  • Ils ont le même nom qu'en html avec une conversion camelback (les majuscules deviennent des minuscules, les – deviennent des majuscules)
  • L'attribut class devient className

La valeur obtenue peut-être de type string, number ou boolean.

Il est également possible d'utiliser les fonctions getAttribute ou setAttribute (dans ce cas, la valeur est une chaine de caractères).

Exemple : Code html : 

<img src="images/monPortrait.jpg" alt="Mon portrait" id="photo" />

Code javascript : 

var monImage = document.getElementById("photo"); 
photo.src ="images/joconde.jpg"; 
photo.alt = "La Joconde";

Manipuler le contenu

La propriété innerHTML représente le contenu html d'un élément. En lecture, sa valeur contient les balises, en modification, il sera interprété par le navigateur.

La propriété textContent représente le contenu textuel d'un élément.

Agir sur les propriétés css

La propriété style d'un élément permet de modifier les propriétés css pour cet élément. Elles sont accessibles par leur nom converti en camelback (ainsi font-size devient fontSize). La valeur obtenue est une chaine de caractères.

Attention :

style ne permet pas d'accéder aux propriétés définies dans une feuille de style, mais uniquement d'accéder aux propriétés définies dans le document html ou via style.

Pour accéder à un style défini par une règle dans une feuille de style, il faut utiliser la fonction getComputedStyle qui permet d'obtenir l'ensemble des valeurs des propriétés CSS appliquées par le navigateur pour un élément.

Exemple : 

  
var element = document . getElementById (" exemple "); 
var computed = window . getComputedStyle (element ); 
var margeL = computed . marginLeft ; // unité récupérée en px, pas de  raccourci : computed.marge interdit 
var couleur = computed . backgroundColor ; // format rgb (... ,...  ,...) 
var largeur = parseInt ( computed . width );  
var nvLargeur = Math . floor ( largeur *1.10) ; // ajout de 10% 
element . style . width = nvLargeur + "px"; // modifie style appliqué

getComputedStyle permet d'accéder aux valeurs, mais pour effectuer une modification, il faut utiliser style.

Manipuler le DOM

Javascript permet de modifier la structure de l'arbre DOM. Il permet notamment d'accéder aux informations sur les nœuds de l'arbre, de créer de nouveaux nœuds, d'insérer, de supprimer ou de déplacer des nœuds dans l'arbre.

Les nœuds de l'arbre DOM sont des objets de type Node.

L'objet Node

Cet objet possède les propriétés suivantes :

  • nodeName : nom du nœud
  • nodeType : type de nœud (1 : élément de type Node, 3 élément de type texte)
  • nodeValue : contenu textuel s'il s'agit d'un nœud de type texte, null sinon
  • parentNode ; nœud parent
  • childNodes : liste des nœuds enfants

Créer un noeud

  • document.createElement(balise) : création de nœud avec la balise précisée
  • document.createTextNode(text) : création d'un nouveau nœud texte dont le contenu est text
  • node.cloneNode(prof) : crée un nouveau nœud, copie de node, avec ses descendant si prof=true, sans ses descendants si prof=false.

Insérer un nœud dans le document

  • noeudParent.insertBefore(noeud,noeudReference) : insère noeud avant noeudReference comme fils de noeudParent. Il faut que noeudReference soit un enfant de noeudParent
  • parent.appendChild(noeud) : noeud est ajouté à la suite des fils de parent

Un nœud récupéré et inséré ailleurs est déplacé, il n'existe plus de sa position initial.

Supprimer un nœud

  • parent.removeChild(noeud) : noeud est supprimé des fils de parent
  • parent.replaceChild(remplaçant,remplacé) : remplaçant prend la place de remplacé comme fils de parent