Différences

Ci-dessous, les différences entre deux révisions de la page.

--- sio2:le_document_object_model [2024/10/17 21:52] – [L’arbre DOM (Document Object Model)] dthevenot
+++ sio2:le_document_object_model [2024/10/18 08:52] (Version actuelle) – [Propriétés des éléments] dthevenot
@@ Ligne 1: / Ligne 1: @@
-====== Model (DOM) et les sélecteurs ======
+~~SLIDESHOW~~
+====== Model (DOM)  ======
  {{ :promo_2025:slam:arbreenvers.jpg?200|}}
 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>.
@@ Ligne 16: / Ligne 17: @@
 </code>
 ===== L’arbre DOM (Document Object Model) =====
-Structure arborescente.
 Tout document HTML peut être représenté sous une forme arborescente
 Exemple :
@@ Ligne 34: / Ligne 33: @@
 </html>
 </code>
+=====  =====
 Le code HTML généré par le DOM-Tree se présente donc ainsi :{{:promo_2025:slam:arbredom.png?600|}}
+=====  =====
 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).
@@ Ligne 41: / Ligne 41: @@
 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 :
 <code>
@@ Ligne 57: / Ligne 57: @@
 -    ---- img
 </code>
+=====  =====
 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.
-  * Pour voir une structure DOM : https://software.hixie.ch/utilities/js/live-dom-viewer/
+=> Explorer le DOM avec les outils de développement du navigateur
-  * Explorer le DOM avec les outils de développement du navigateur (firefox)
-====== Ressources et compléments ======
+==== Ressources et compléments ====
 https://fr.javascript.info/dom-nodes
 https://www.ionos.fr/digitalguide/sites-internet/developpement-web/document-object-model-dom/
-===== CSS : les sélecteurs =====
+===== Agir sur les éléments et manipuler le DOM =====
-Un sélecteur permet de déterminer les éléments sur lesquels s’applique une règle de type.
+==== 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
-==== Sélecteur simple : ====
+__Remarque :__ //querySelector// et //querySelecteurAll// sont moins performants que leurs équivalents  getElement…
-  * ***** : tout élément
+=====  =====
-  * **balise** : tout élément dont la balise est <balise>, exemple article { … }
+==== Propriétés des éléments ====
-  * **#id** : tout élément dont l’attribut id vaut id
+Les éléments obtenus par sélection possèdent des propriétés manipulables : attributs, contenu, style  css.
-  * **.class** : tout élément dont l’attribut class vaut class
+=== 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).
-==== Sélection selon un attribut  ====
+__Exemple :__
-Soit E un élément de type sélecteur simple :
+Code html : <code><img src="images/monPortrait.jpg" alt="Mon portrait" id="photo" /> </code>
-  * **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__
+Code javascript :
+<code>
+var monImage = document.getElementById("photo");
+photo.src ="images/joconde.jpg";
+photo.alt = "La Joconde";
+</code>
+=====  =====
+=== 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.
-  * Pour accéder à un élément dont l’attribut class est défini, utilisation du **.**
+La propriété **textContent** représente le contenu textuel d'un élément.
-  * Pour accéder à un élément dont l’attribut id est défini, utilisation du **#**
+=====  =====
+=== 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.
-==== Sélecteurs de pseudo-classes et pseudo éléments ====
+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.
-__Pseudo-classes :__
+=====  =====
-  *** E:pseudoC** tout élément appartenant à la pseudo-classe pseudoC, exemple : a :visited, a.fichier :hover
+__Exemple :__
+<code>
+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é
+</code>
-Quelques pseudo-classes :
+**getComputedStyle** permet d'accéder aux valeurs, mais pour effectuer une modification, il faut utiliser  style.
-  * **: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
+==== Manipuler le DOM ====
-  * **: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)
+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.
-  * **: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__ :
+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
+=====  =====
+  * firstChild, lastChild : premier ou dernier nœud
+  * previousSibling, nextSibling : nœud frère precedent ou suivant
+  * … cf https://developer.mozilla.org/fr/docs/Web/API/Node
+=====  =====
+=== 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
-  * **E::pseudoE** tout pseudo-élément pseudoE de l’élément E, exemple : h1 ::first-letter, p[lang=fr] ::first line
+Un nœud récupéré et inséré ailleurs est déplacé, il n'existe plus de sa position initial.
+=====  =====
-Quelques pseudo-éléments :
+=== Supprimer un nœud ===
-  * **::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) ;}
-==== Utilisation de compteur en css, exemple ====
+  * **parent.removeChild(noeud)** : noeud est supprimé des fils de parent
-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
+  * **parent.replaceChild(remplaçant,remplacé)** : remplaçant prend la place de remplacé comme fils de  parent
-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) ;}
-===== Combinaison de sélecteurs =====
-  * **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.