# Manipulation du DOM & Événements > **Ce cours couvre :** Sélection d'éléments HTML · Contenu & Attributs · Création & Modification du DOM · Événements --- ## Manipulation du DOM — Sélection d'Éléments HTML Le **DOM** (Document Object Model) est la représentation de la page HTML sous forme d'arbre d'objets. JavaScript peut lire et modifier cet arbre pour rendre la page dynamique. ### Sélection directe | Méthode | Signification | |---|---| | `document.getElementById("id")` | Sélectionne **un seul** élément par son attribut `id`. Retourne l'élément ou `null`. Le plus rapide. | | `document.querySelector("selecteur")` | Sélectionne le **premier** élément correspondant au sélecteur CSS. Ex: `".btn"`, `"#titre"`, `"nav > ul"`. | | `document.querySelectorAll("selecteur")` | Sélectionne **tous** les éléments correspondants. Retourne une `NodeList` (similaire à un tableau). | | `document.getElementsByClassName("classe")` | Sélectionne tous les éléments ayant cette classe. Retourne une `HTMLCollection` (live — se met à jour si le DOM change). | | `document.getElementsByTagName("balise")` | Sélectionne tous les éléments d'un type de balise donné. Ex: `"p"`, `"div"`, `"li"`. | ```html

Bonjour

Paragraphe 1

Paragraphe 2

``` ```js // Par ID (retourne un seul élément) let app = document.getElementById("app"); // Par sélecteur CSS (retourne le premier trouvé) let titre = document.querySelector(".titre"); let premier = document.querySelector("p"); // Tous les éléments correspondants (retourne une NodeList) let tousLesParagraphes = document.querySelectorAll(".texte"); tousLesParagraphes.forEach(p => console.log(p.textContent)); // Par nom de balise let tousLesParagraphes2 = document.getElementsByTagName("p"); ``` ### Navigation dans l'arbre DOM | Propriété | Signification | |---|---| | `element.parentElement` | Retourne l'élément parent direct. | | `element.children` | Retourne tous les enfants directs de l'élément. | | `element.firstElementChild` | Premier enfant direct. | | `element.lastElementChild` | Dernier enfant direct. | | `element.nextElementSibling` | Élément frère suivant (au même niveau dans le DOM). | | `element.previousElementSibling` | Élément frère précédent. | | `element.closest("selecteur")` | Remonte les ancêtres jusqu'à trouver le premier qui correspond au sélecteur. | ```js let paragraphe = document.querySelector("p"); paragraphe.parentElement; //

paragraphe.nextElementSibling; // le

suivant paragraphe.previousElementSibling; // le

précédent let app = document.querySelector("#app"); app.firstElementChild; //

app.lastElementChild; // dernier
app.children; // HTMLCollection de tous les enfants // closest : remonte jusqu'à trouver #app paragraphe.closest("#app"); //
``` --- ## Manipulation du Contenu & des Attributs ### Contenu | Propriété / Méthode | Signification | |---|---| | `.innerText` | Lit ou modifie le texte visible de l'élément. Respecte le CSS (le texte caché n'est pas retourné). Échappe le HTML — une balise `` sera affichée comme du texte brut. | | `.textContent` | Lit ou modifie tout le contenu texte, visible ou non. Plus performant que `innerText`. N'interprète pas le HTML. | | `.innerHTML` | Lit ou modifie le contenu HTML de l'élément. Interprète et rend les balises HTML. Attention : ne jamais y injecter des données utilisateur non filtrées (risque XSS). | | `.outerHTML` | Lit ou remplace l'élément lui-même ET son contenu (pas seulement l'intérieur). | | `.value` | Lit ou modifie la valeur d'un champ de formulaire (``, ``, `<select>`). | ```js let titre = document.querySelector("h1"); // Lire le texte console.log(titre.textContent); // "Bonjour" console.log(titre.innerText); // "Bonjour" // Modifier le texte titre.textContent = "Nouveau titre"; // innerHTML : interprète le HTML titre.innerHTML = "<strong>Titre en gras</strong>"; // ⚠️ Dangereux avec des données utilisateur ! // Lire la valeur d'un input let input = document.querySelector("input"); console.log(input.value); input.value = "Nouveau texte"; ``` ### Attributs HTML | Méthode | Signification | |---|---| | `.getAttribute("attr")` | Retourne la valeur d'un attribut HTML. Ex: `img.getAttribute("src")`. | | `.setAttribute("attr", "val")` | Crée ou modifie un attribut HTML. Ex: `img.setAttribute("alt", "Photo")`. | | `.removeAttribute("attr")` | Supprime un attribut de l'élément. | | `.hasAttribute("attr")` | Retourne `true` si l'attribut existe sur l'élément. | ```js let img = document.querySelector("img"); img.getAttribute("src"); // "/images/photo.jpg" img.setAttribute("alt", "Ma photo"); // modifie ou crée l'attribut alt img.hasAttribute("alt"); // true img.removeAttribute("alt"); // supprime l'attribut ``` ### Classes CSS | Méthode | Signification | |---|---| | `.classList.add("classe")` | Ajoute une classe CSS à l'élément. | | `.classList.remove("classe")` | Supprime une classe CSS. | | `.classList.toggle("classe")` | Ajoute la classe si absente, la supprime si présente. | | `.classList.contains("classe")` | Retourne `true` si l'élément possède cette classe. | | `.classList.replace("old", "new")` | Remplace une classe par une autre. | | `.className` | Lit ou réécrit toutes les classes sous forme de string. | ```js let bouton = document.querySelector(".btn"); bouton.classList.add("actif"); // ajoute la classe "actif" bouton.classList.remove("inactif"); // supprime "inactif" bouton.classList.toggle("visible"); // ajoute si absent, retire si présent bouton.classList.contains("actif"); // true bouton.classList.replace("actif", "selectionne"); // swap de classes ``` ### Styles CSS en ligne | Propriété | Signification | |---|---| | `.style.propriete = "valeur"` | Applique un style CSS directement en inline. Ex: `el.style.color = "red"`. Les propriétés CSS avec tiret s'écrivent en camelCase : `background-color` → `backgroundColor`. | ```js let boite = document.querySelector(".boite"); boite.style.color = "white"; boite.style.backgroundColor = "blue"; // background-color → camelCase ! boite.style.fontSize = "20px"; boite.style.display = "none"; // cacher un élément ``` --- ## Création & Modification du DOM Ces méthodes permettent de créer de nouveaux éléments et de les insérer dans la page. | Méthode | Signification | |---|---| | `document.createElement("balise")` | Crée un nouvel élément HTML en mémoire. Il n'est pas encore visible dans la page. | | `element.appendChild(enfant)` | Insère un élément comme dernier enfant du parent. | | `element.prepend(enfant)` | Insère un élément comme premier enfant du parent. | | `element.append(enfant)` | Similaire à `appendChild` mais accepte aussi du texte directement. | | `element.before(noeud)` | Insère un élément avant l'élément cible (en dehors, au même niveau). | | `element.after(noeud)` | Insère un élément après l'élément cible. | | `element.remove()` | Supprime l'élément du DOM. | | `element.removeChild(enfant)` | Supprime un enfant spécifique depuis son parent. | | `element.replaceWith(noeud)` | Remplace l'élément par un autre nœud. | | `element.cloneNode(true)` | Crée une copie de l'élément. `true` = copie avec tous ses enfants. | | `document.createTextNode("texte")` | Crée un nœud texte brut (sans balise HTML). | ```js // 1. Créer un élément let nouvelleDiv = document.createElement("div"); nouvelleDiv.textContent = "Je suis nouveau !"; nouvelleDiv.classList.add("carte"); // 2. L'insérer dans la page let container = document.querySelector("#app"); container.appendChild(nouvelleDiv); // ajouté à la fin // 3. Créer un li et l'ajouter à une liste let liste = document.querySelector("ul"); let item = document.createElement("li"); item.textContent = "Nouvel élément"; liste.prepend(item); // ajouté au début // 4. Insérer avant/après un élément existant let reference = document.querySelector(".carte"); let encart = document.createElement("p"); encart.textContent = "Avant la carte"; reference.before(encart); // inséré avant .carte // 5. Supprimer un élément reference.remove(); // supprime directement // 6. Cloner un élément (avec ses enfants) let clone = reference.cloneNode(true); container.append(clone); ``` ### Exemple complet : générer une liste dynamiquement ```js let fruits = ["Pomme", "Banane", "Cerise"]; let liste = document.createElement("ul"); fruits.forEach(fruit => { let item = document.createElement("li"); item.textContent = fruit; liste.appendChild(item); }); document.body.appendChild(liste); ``` --- ## Événements Les événements permettent à JavaScript de réagir aux actions de l'utilisateur (clics, frappes clavier, soumission de formulaire, etc.). ### Ajout & Suppression d'Écouteurs | Méthode | Signification | |---|---| | `element.addEventListener("event", fonction)` | Attache une fonction à un événement. Méthode recommandée. Peut attacher plusieurs fonctions sur le même événement. | | `element.removeEventListener("event", fonction)` | Détache un écouteur. La fonction passée doit être la même référence que celle ajoutée. | | `element.onclick = fonction` | Attache un écouteur via propriété. Écrase tout écouteur précédent sur `click`. Moins flexible. | ```js let bouton = document.querySelector("#mon-bouton"); // ✅ Méthode recommandée function direBonjour() { console.log("Bonjour !"); } bouton.addEventListener("click", direBonjour); // Retirer l'écouteur (même référence de fonction obligatoire) bouton.removeEventListener("click", direBonjour); // ⚠️ Méthode via propriété (écrase les précédents) bouton.onclick = () => console.log("clic !"); ``` ### Types d'Événements Courants #### Souris | Événement | Déclencheur | |---|---| | `click` | Clic sur l'élément. | | `dblclick` | Double-clic. | | `mouseenter` | Souris entre dans la zone de l'élément. | | `mouseleave` | Souris quitte la zone de l'élément. | | `mouseover` | Souris survole l'élément ou un de ses enfants. | | `mousemove` | Souris se déplace au-dessus de l'élément. | | `contextmenu` | Clic droit sur l'élément. | #### Clavier | Événement | Déclencheur | |---|---| | `keydown` | Une touche du clavier est enfoncée. | | `keyup` | Une touche du clavier est relâchée. | | `keypress` | (Déprécié) Touche maintenue. Préférer `keydown`. | #### Formulaires | Événement | Déclencheur | |---|---| | `input` | La valeur d'un champ change (à chaque frappe). | | `change` | La valeur d'un champ change ET le champ perd le focus. | | `submit` | Formulaire soumis. | | `focus` | L'élément reçoit le focus (sélection ou clic). | | `blur` | L'élément perd le focus. | #### Page & Fenêtre | Événement | Déclencheur | |---|---| | `load` | La page ou une ressource est entièrement chargée. | | `DOMContentLoaded` | Le HTML est parsé et le DOM est prêt (avant les images et styles). | | `resize` | La fenêtre du navigateur est redimensionnée. | | `scroll` | L'utilisateur fait défiler la page ou un élément. | ```js // Clavier document.addEventListener("keydown", (event) => { if (event.key === "Enter") console.log("Entrée pressée !"); if (event.key === "Escape") console.log("Echap pressée !"); }); // Formulaire let form = document.querySelector("form"); form.addEventListener("submit", (event) => { event.preventDefault(); // empêche le rechargement de la page console.log("Formulaire soumis !"); }); // Attendre que le DOM soit prêt document.addEventListener("DOMContentLoaded", () => { console.log("DOM prêt !"); // Initialiser son code ici }); ``` --- ### L'Objet `event` Chaque écouteur reçoit automatiquement un objet `event` contenant des informations sur ce qui s'est passé. | Propriété / Méthode | Signification | |---|---| | `event.target` | L'élément exactement cliqué (peut être un enfant de l'élément écouté). | | `event.currentTarget` | L'élément sur lequel l'écouteur est directement attaché. | | `event.type` | Le type de l'événement déclenché. Ex: `"click"`, `"keydown"`. | | `event.preventDefault()` | Annule le comportement par défaut du navigateur. Ex: empêche la soumission d'un formulaire ou le suivi d'un lien. | | `event.stopPropagation()` | Empêche l'événement de remonter vers les éléments parents (arrête le bubbling). | | `event.key` | La touche du clavier pressée. Ex: `"Enter"`, `"Escape"`, `"a"`. | | `event.clientX` / `event.clientY` | Position de la souris en pixels depuis le bord de la fenêtre visible. | ```js bouton.addEventListener("click", (event) => { console.log(event.type); // "click" console.log(event.target); // l'élément cliqué console.log(event.currentTarget); // l'élément écouté event.preventDefault(); // annule le comportement par défaut }); document.addEventListener("mousemove", (event) => { console.log(event.clientX, event.clientY); // position de la souris }); ``` --- ### Event Bubbling & Event Delegation #### Event Bubbling (propagation) Quand on clique sur un élément, l'événement remonte automatiquement vers tous ses parents. ```html <div id="parent"> <button id="enfant">Cliquer</button> </div> ``` ```js document.querySelector("#parent").addEventListener("click", () => { console.log("Parent cliqué"); }); document.querySelector("#enfant").addEventListener("click", (e) => { console.log("Enfant cliqué"); e.stopPropagation(); // empêche la remontée vers #parent }); ``` #### Event Delegation (délégation) Technique qui consiste à placer l'écouteur sur le parent pour gérer les événements de tous ses enfants. Très utile pour les listes dynamiques. ```js // ✅ Un seul écouteur sur le parent (au lieu d'un par li) let liste = document.querySelector("ul"); liste.addEventListener("click", (event) => { // event.target = le li exactement cliqué if (event.target.tagName === "LI") { event.target.classList.toggle("selectionne"); console.log("Élément sélectionné :", event.target.textContent); } }); // Fonctionne même pour les <li> ajoutés APRÈS l'écouteur ! let nouveau = document.createElement("li"); nouveau.textContent = "Nouveau fruit"; liste.appendChild(nouveau); ``` --- > ✅ Prochaine étape → : Quiz sur la manipulation du DOM</article></body></html>

Débloquez l'accès complet à la Suite d'Ingénierie KsiLoG Academy.