Différences

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

--- sio2:le_document_object_model [2024/10/17 22:57] – dthevenot
+++ sio2:le_document_object_model [2024/10/18 08:52] (Version actuelle) – [Propriétés des éléments] dthevenot
@@ Ligne 60: / Ligne 60: @@
 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/
@@ Ligne 73: / Ligne 72: @@
   * 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
@@ Ligne 80: / Ligne 80: @@
 =====  =====
 ==== 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 ===
@@ Ligne 97: / Ligne 96: @@
 var monImage = document.getElementById("photo");
 photo.src ="images/joconde.jpg";
-photo.alt = La Joconde";
+photo.alt = "La Joconde";
 </code>
 =====  =====
@@ Ligne 118: / Ligne 117: @@
 __Exemple :__
 <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 couleur = computed . backgroundColor ; // format rgb (... ,...  ,...)
@@ Ligne 142: / Ligne 142: @@
   * parentNode ; nœud parent
   * 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
   * … cf https://developer.mozilla.org/fr/docs/Web/API/Node