Différences

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

--- web:js:dom [2023/03/30 20:18] – [write] jcheron
+++ web:js:dom [2023/03/31 03:06] (Version actuelle) – [Suppression de Listener] jcheron
@@ Ligne 201: / Ligne 201: @@
 <sxh javascript>
 <script>
-document.write('<p>Hello <strong>world</strong></p>');
+document.write('<p>Hello <strong>world</strong>!</p>');
 </script>
 </sxh>
@@ Ligne 207: / Ligne 207: @@
 <html><div class="imageB">
 <script>
-document.write('<p>Hello <strong>world</strong></p>');
+document.write('<p>Hello <strong>world</strong>!</p>');
 </script>
 </div></html>
-==== createNode & append ====
+==== 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>