sio2:le_document_object_model

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
sio2:le_document_object_model [2024/10/17 22:53] – [Propriétés des éléments] dthevenotsio2:le_document_object_model [2024/10/18 08:52] (Version actuelle) – [Propriétés des éléments] dthevenot
Ligne 1: Ligne 1:
 +~~SLIDESHOW~~
 ====== Model (DOM)  ====== ====== Model (DOM)  ======
  {{ :promo_2025:slam:arbreenvers.jpg?200|}}  {{ :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. 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. 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. 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. 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>. Par exemple, document.body est l’objet représentant la balise <body>.
  
Ligne 16: Ligne 17:
 </code> </code>
 ===== L’arbre DOM (Document Object Model) ===== ===== L’arbre DOM (Document Object Model) =====
-Structure arborescente. 
- 
 Tout document HTML peut être représenté sous une forme arborescente  Tout document HTML peut être représenté sous une forme arborescente 
 Exemple :  Exemple : 
Ligne 34: Ligne 33:
 </html> </html>
 </code> </code>
 +=====  =====
 Le code HTML généré par le DOM-Tree se présente donc ainsi :{{:promo_2025:slam:arbredom.png?600|}} 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).  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.  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 :  Autre représentation du DOM : 
 <code> <code>
Ligne 57: Ligne 57:
 -    ---- img -    ---- img
 </code> </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.  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://fr.javascript.info/dom-nodes
 https://www.ionos.fr/digitalguide/sites-internet/developpement-web/document-object-model-dom/ https://www.ionos.fr/digitalguide/sites-internet/developpement-web/document-object-model-dom/
Ligne 72: Ligne 72:
   * Par son attribut classe : **var classList = document.getElementsByClassName("nomClasse);** classList se manipulera comme un tableau    * 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 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");**    * Par un sélecteur css : **var element = document.querySelector("table td .ztValeur");** 
     * querySelector retourne le 1er élément correspondant au sélecteur      * querySelector retourne le 1er élément correspondant au sélecteur 
Ligne 77: Ligne 78:
  
 __Remarque :__ //querySelector// et //querySelecteurAll// sont moins performants que leurs équivalents  getElement…  __Remarque :__ //querySelector// et //querySelecteurAll// sont moins performants que leurs équivalents  getElement… 
 +=====  =====
 ==== Propriétés des éléments ==== ==== Propriétés des éléments ====
-  
 Les éléments obtenus par sélection possèdent des propriétés manipulables : attributs, contenu, style  css.  Les éléments obtenus par sélection possèdent des propriétés manipulables : attributs, contenu, style  css. 
 === Manipuler les attributs === === Manipuler les attributs ===
Ligne 86: Ligne 86:
   * L'attribut class devient className    * L'attribut class devient className 
 La valeur obtenue peut-être de type string, number ou boolean.  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).  Il est également possible d'utiliser les fonctions getAttribute ou setAttribute (dans ce cas, la valeur est  une chaine de caractères). 
  
Ligne 96: Ligne 96:
 var monImage = document.getElementById("photo");  var monImage = document.getElementById("photo"); 
 photo.src ="images/joconde.jpg";  photo.src ="images/joconde.jpg"; 
-photo.alt = La Joconde"; +photo.alt = "La Joconde"; 
 </code> </code>
 +=====  =====
 === Manipuler le contenu === === Manipuler le contenu ===
    
Ligne 104: Ligne 104:
  
 La propriété **textContent** représente le contenu textuel d'un élément.  La propriété **textContent** représente le contenu textuel d'un élément. 
 +=====  =====
 === Agir sur les propriétés css === === 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.  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 :__ __Attention :__
    
Ligne 114: Ligne 114:
  
 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.  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 :__ __Exemple :__
 <code>   <code>  
-var element = document . getElementById (" exemple "); var computed = window . getComputedStyle (element ); +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 margeL = computed . marginLeft ; // unité récupérée en px, pas de  raccourci : computed.marge interdit 
 var couleur = computed . backgroundColor ; // format rgb (... ,...  ,...)  var couleur = computed . backgroundColor ; // format rgb (... ,...  ,...) 
Ligne 126: Ligne 127:
  
 **getComputedStyle** permet d'accéder aux valeurs, mais pour effectuer une modification, il faut utiliser  style.  **getComputedStyle** permet d'accéder aux valeurs, mais pour effectuer une modification, il faut utiliser  style. 
 +=====  =====
 ==== Manipuler le DOM ==== ==== Manipuler le DOM ====
    
Ligne 132: Ligne 133:
  
 Les nœuds de l'arbre DOM sont des objets de type Node.  Les nœuds de l'arbre DOM sont des objets de type Node. 
 +=====  =====
 === L'objet Node === === L'objet Node ===
    
Ligne 141: Ligne 142:
   * parentNode ; nœud parent    * parentNode ; nœud parent 
   * childNodes : liste des nœuds enfants    * childNodes : liste des nœuds enfants 
-  * firstChild, lastChild : premier ou dernier nœud +=====  ===== 
 +  * firstChild, lastChild : premier ou dernier nœud
   * previousSibling, nextSibling : nœud frère precedent ou suivant    * previousSibling, nextSibling : nœud frère precedent ou suivant 
   * … cf https://developer.mozilla.org/fr/docs/Web/API/Node    * … cf https://developer.mozilla.org/fr/docs/Web/API/Node 
 +=====  =====
 === Créer un noeud === === Créer un noeud ===
    
Ligne 150: Ligne 152:
   * **document.createTextNode(text)** : création d'un nouveau nœud texte dont le contenu est text    * **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.    * **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 === === Insérer un nœud dans le document ===
    
Ligne 157: Ligne 159:
  
 Un nœud récupéré et inséré ailleurs est déplacé, il n'existe plus de sa position initial.  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 === === Supprimer un nœud ===
    
  • sio2/le_document_object_model.1729198407.txt.gz
  • Dernière modification : 2024/10/17 22:53
  • de dthevenot