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:49] – 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 ====
    
 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.  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.  Les nœuds de l'arbre DOM sont des objets de type Node. 
-L'objet Node +=====  ===== 
 +=== L'objet Node === 
 + 
 Cet objet possède les propriétés suivantes :  Cet objet possède les propriétés suivantes : 
-nodeName : nom du nœud  +  * 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 +  * nodeType : type de nœud (1 : élément de type Node, 3 élément de type texte)  
-BTS SIO – SLAM - Javascript(3) Page 3 / 6  +  * nodeValue : contenu textuel s'il s'agit d'un nœud de type texte, null sinon 
-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  +=====  ===== 
-previousSibling, nextSibling : nœud frère precedent ou suivant  +  * firstChild, lastChild : premier ou dernier nœud 
-… cf https://developer.mozilla.org/fr/docs/Web/API/Node  +  * previousSibling, nextSibling : nœud frère precedent ou suivant  
-Créer un noeud  +  * … cf https://developer.mozilla.org/fr/docs/Web/API/Node  
-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.  +=== Créer un noeud === 
-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  +  * **document.createElement(balise)** : création de nœud avec la balise précisée  
-parent.appendChild(noeud) : noeud est ajouté à la suite des fils de parent  +  * **document.createTextNode(text)** : création d'un nouveau nœud texte dont le contenu est text  
-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  +  * **node.cloneNode(prof)** : crée un nouveau nœud, copie de node, avec ses descendant si prof=true, sans ses descendants si prof=false.  
-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 +=== 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 
  
  • sio2/le_document_object_model.1729198177.txt.gz
  • Dernière modification : 2024/10/17 22:49
  • de dthevenot