Différences

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

--- web:js:dom [2023/03/30 18:44] – [write] jcheron
+++ web:js:dom [2023/03/31 03:06] (Version actuelle) – [Suppression de Listener] jcheron
@@ Ligne 1: / Ligne 1: @@
 ====== Javascript - DOM ======
-Le DOM, Document Object Model correspond à la l'ensemble des objets définis de manière arborescente générés par le navigateur par l'interprétation d'un document HTML.
+Le DOM, Document Object Model correspond à l'ensemble des objets définis de manière arborescente générés par le navigateur depuis l'interprétation d'un document HTML.
 Le DOM fourni une API permettant sa manipulation, à partir de Javascript.
@@ Ligne 134: / Ligne 134: @@
 <img id="img2" src="https://cdn-icons-png.flaticon.com/512/1249/1249903.png" alt="freepicks sample" title="User image" width="64px">
 <script>
-document.getElementById("img2").src="https://cdn-icons-png.flaticon.com/512/1253/1253565.png";
+document.getElementById("img2").src="https://cdn-icons-png.flaticon.com/512/1214/1214338.png";
 document.getElementById("img2").title='Updated user image'
 </script>
@@ Ligne 142: / Ligne 142: @@
 <img id="img2" src="https://cdn-icons-png.flaticon.com/512/1249/1249903.png" alt="freepicks sample" title="User image" width="64px">
 <script>
-document.getElementById("img2").src="https://cdn-icons-png.flaticon.com/512/1253/1253565.png";
+document.getElementById("img2").src="https://cdn-icons-png.flaticon.com/512/1214/1214338.png";
 document.getElementById("img2").title='Updated user image'
 </script>
@@ Ligne 169: / Ligne 169: @@
 </div></html>
+<wrap info>L'utilisation de innerHTML en lecture est à utiliser avec précaution, étant donné que le contenu HTML ne peut pas être vérifié et peut produire un DOM incohérent.</wrap>
+<sxh html>
+<div id="myDiv">
+    <p></p>
+    <p></p>
+</div>
+<script>
+document.querySelectorAll("#myDiv p").forEach(function(p){
+    p.innerHTML='Hello <strong>world!</strong>';
+});
+</script>
+</sxh>
+<html><div class="imageB">
+<div id="div-update">
+    <p>1</p>
+    <p>2</p>
+</div>
+<script>
+document.querySelectorAll("#div-update p").forEach(function(p){
+    p.innerHTML='Hello <strong>world!</strong>';
+    console.log('p');
+});
+</script>
+</div></html>
 ==== write ====
-<wrap info>L'utilisation de innerHTML en lecture est à utiliser avec précaution, étant donné que le contenu HTML ne peut pas être vérifié et peut produir un DOM incohérent.</wrap>
-==== createNode & append ====
+**document.write()** permet d'écrire sur la page, à l'endroit où la méthode est appelée.
+<sxh javascript>
+<script>
+document.write('<p>Hello <strong>world</strong>!</p>');
+</script>
+</sxh>
+<html><div class="imageB">
+<script>
+document.write('<p>Hello <strong>world</strong>!</p>');
+</script>
+</div></html>
+==== createElement & appendChild ====
+La méthode **createElement** crée un élément et le retourne, tandis que **appendChild** permet de le placer dans le DOM.
+<sxh html>
+<p id="append">Ancien contenu...</p>
+<script>
+const h3=document.createElement("h3");
+h3.innerHTML="Hello world!";
+document.getElementById('append').appendChild(h3);
+</script>
+</sxh>
+<html>
+<div class="imageB">
+<p id="append">Ancien contenu...</p>
+<script>
+const h3=document.createElement("h3");
+h3.innerHTML="Hello world!";
+document.getElementById('append').appendChild(h3);
+</script>
+</div>
+</html>
 ===== Evènements =====
 ==== Listener ====
+La méthode **addEventListener()** attache un gestionnaire d'événements à l'élément spécifié.
+<sxh html>
+<button id="bt-alert">Click me!</button>
+<script>
+document.getElementById('bt-alert').addEventListener("click", function(){ alert("Hello World!"); });
+</script>
+</sxh>
+<html><div class="imageB">
+<button id="bt-alert">Click me!</button>
+<script>
+document.getElementById('bt-alert').addEventListener('click', function(){ alert('Hello World!'); });
+</script>
+</div></html>
+Il est possible d'ajouter plusieurs gestionnaires sur le même évènement d'un élément.
+==== Suppression de Listener ====
+<sxh html>
+<button id="bt-alert-2">Click me...</button>
+<script>
+const message=function(){ alert('Hello World!'); };
+const bt=document.getElementById('bt-alert-2');
+bt.addEventListener('click', message);
+bt.removeEventListener('click', message);
+</script>
+</sxh>
+<html><div class="imageB">
+<button id="bt-alert-2">Click me...</button>
+<script>
+const message=function(){ alert('Hello World!'); };
+const bt=document.getElementById('bt-alert-2');
+bt.addEventListener('click', message);
+bt.removeEventListener('click', message);
+</script>
+</div></html>