web:js:dom

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
web:js:dom [2023/03/30 18:57] – [write] jcheronweb:js:dom [2023/03/31 03:06] (Version actuelle) – [Suppression de Listener] jcheron
Ligne 1: Ligne 1:
 ====== Javascript - DOM ====== ====== 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. 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"> <img id="img2" src="https://cdn-icons-png.flaticon.com/512/1249/1249903.png" alt="freepicks sample" title="User image" width="64px">
 <script> <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' document.getElementById("img2").title='Updated user image'
 </script> </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"> <img id="img2" src="https://cdn-icons-png.flaticon.com/512/1249/1249903.png" alt="freepicks sample" title="User image" width="64px">
 <script> <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' document.getElementById("img2").title='Updated user image'
 </script> </script>
Ligne 169: Ligne 169:
 </div></html> </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 produire un DOM incohérent.</wrap> <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>
  
Ligne 185: Ligne 184:
  
 <html><div class="imageB"> <html><div class="imageB">
-<div id="myDiv"> +<div id="div-update"> 
-    <p></p> +    <p>1</p> 
-    <p></p>+    <p>2</p>
 </div> </div>
 <script> <script>
-document.querySelectorAll("#myDiv p").forEach(function(p){+document.querySelectorAll("#div-update p").forEach(function(p){
     p.innerHTML='Hello <strong>world!</strong>';     p.innerHTML='Hello <strong>world!</strong>';
 +    console.log('p');
 }); });
 </script> </script>
 </div></html> </div></html>
-==== createNode & append ====+==== write ====
  
 +**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 ===== ===== Evènements =====
  
 ==== Listener ==== ==== 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>
  
  
  • web/js/dom.1680195462.txt.gz
  • Dernière modification : il y a 3 ans
  • de jcheron