How are you?
```  --- ## Interagir avec le DOM --- - Objet `document` ([doc](https://developer.mozilla.org/fr/docs/Web/API/Document)) : - **Propriétés** : les éléments du document - `body`, `head`, `doctype`... - **Méthodes** : pour interagir avec le document - Créer, supprimer ou modifier des **éléments** - Gérer des **évènements** - Manipuler le **stockage** - **Événements** : pour interpréter les actions des utilisateurs --- ### Sélectionner des éléments - `document.getElementById("id")` - Récupère l'élément par son id - `document.getElementsByClassName("classe")` - Récupère **une liste** d'éléments par leur classe - attention : getElement**s** - `document.querySelector("selecteur_css")` - Récupère **premier** élément par le sélecteur CSS - ex: `#id` `.class` `balise[attribut]`... --- ```htmlTexte mis en valeur
Ordinaire
``` ```js const title = document.getElementById("titre") const special = document.getElementsByClassName("special") const paragraphs = document.querySelector("p") ``` --- ### Manipuler le contenu d'un élément On manipule les propriétés d'un élément : - `textContent` : texte de l'élément - `innerHTML` : HTML de l'élément - (Contenu initial
``` --- ### Manipuler le style d'un élément On manipule la propriété `style` d'un élément, qui nous donne accès aux propriétés de style (comme le CSS) ```js titre.style.color = "red"; titre.style.fontStyle = "italic"; // Remarquez le passage au camelCase de font-style ``` **Remarque** : la casse des propriétés de style - en JS : `camelCase` - en CSS : `kebab-case` --- ### Créer, insérer, remplacer, supprimer des éléments - Créer : `createElement("balise");` - Insérer : - `appendChild(nouvel_element)` : ajoute un enfant à un élément parent - `insertBefore(nouvel_element, autre_element)` : ajoute un élément avant un autre - Remplacer : - `replaceChild(nouvel_element, ancien_element)` - Supprimer : - `remove()` : supprime l'élément sur lequel elle est appliquée - `removeChild(element)` : retire l'élément enfant d'un élément parent --- ```htmlParagraphe 1
Paragraphe 2
const nouveau = document.createElement("p"); nouveau.textContent = "Nouveau paragraphe créé"; // INSÉRER à la fin du container container.appendChild(nouveau); // REMPLACER le paragraphe 1 par un nouveau const remplacement = document.createElement("p"); remplacement.textContent = "Je remplace le premier paragraphe"; const parag1 = document.getElementById("parag1"); container.replaceChild(remplacement, parag1); // SUPPRIMER le paragraphe 2 const parag2 = document.getElementById("parag2"); parag2.remove(); ``` --- ### Gérer les évènements **Évènements** : actions qui se produisent dans le navigateur - Clic de souris - Frappe au clavier - Chargement de page - On gère les interactions grâce aux évènements - On lie un évènement à un gestionnaire d'évènement - **Gestionnaire d'évènement** : fonction appelée quand l'évènement survient --- #### Attributs On peut lier un gestionnaire d'évènement à un évènement grâce à un attribut dans le HTML ```html ``` - `onclick` : appelle le code quand on clique sur le bouton - Facile et rapide mais **mauvaise pratique** - Mélange HTML et JavaScript - mauvaise séparation des responsabilités - Peu flexible - un seul gestionnaire à la fois - difficile à maintenir --- #### EventListener On préfère cette méthode : lier un gestionnaire d'évènements à un évènement dans le code JS - méthode `addEventListener` ```html ``` ```js const bouton = document.getElementById("btn"); bouton.addEventListener("click", function() { texte.textContent = "Bouton cliqué !"; }); ``` --- Plusieurs types d'évènements : - `input` : modification d’une zone de saisie - `change` : changement d’état (ex. : sélection) - `mouseover` / `mouseout` : passage de la souris sur un élément - `keydown` / `keyup` : touches du clavier pressées ou relâchées.