🌳 Le DOM

JavaScript

Document Object Model

Manipuler les pages web dynamiquement

Formation DWWM - 2026

Au programme 📋

# 🌳 Partie 0

Qu'est-ce que le DOM ?

Comprendre le Document Object Model

C'est quoi le DOM ? đŸ€”

Le DOM (Document Object Model) est une représentation en arbre de ta page HTML que JavaScript peut manipuler.

Analogie : La marionnette 🎭

Imagine ta page HTML comme une marionnette. Le DOM, c'est l'ensemble des fils qui permettent au marionnettiste (JavaScript) de contrÎler la marionnette : changer sa position, ses couleurs, la faire bouger, réagir aux événements...

Sans le DOM, JavaScript ne pourrait PAS interagir avec ta page !

HTML statique (fichier .html)
↓
Le navigateur le lit
↓
Crée le DOM (arbre d'objets)
↓
JavaScript peut manipuler le DOM
↓
La page devient DYNAMIQUE !

Structure du DOM : L'arbre đŸŒČ

Le DOM organise ta page en arbre hiérarchique avec des parents, enfants, frÚres...

HTML de départ

<!DOCTYPE html>
<html>
  <head>
    <title>Ma Page</title>
  </head>
  <body>
    <h1>Titre</h1>
    <p>Paragraphe</p>
  </body>
</html>

Arbre DOM correspondant

document
└── html
├── head
│ └── title
│ └── "Ma Page" (texte)
└── body
├── h1
│ └── "Titre" (texte)
└── p
└── "Paragraphe" (texte)

Chaque balise HTML = un nƓud (node) dans l'arbre DOM

Types de nƓuds 📍

Type Description Exemple
Document Racine de tout document
Element Balises HTML <div>, <p>, <h1>
Text Texte dans les balises Le texte dans <p>Texte</p>
Attribute Attributs des balises class="...", id="..."
Comment Commentaires HTML <!-- commentaire -->

En pratique, on manipule surtout les éléments (balises HTML) !

# 🔍 Partie 1

SĂ©lectionner des ÉlĂ©ments

Accéder aux éléments du DOM

getElementById : SĂ©lectionner par ID 🎯

Sélectionne un élément par son attribut id.

HTML

<h1 id="titre">Bonjour</h1>
<p id="paragraphe">Ceci est un paragraphe</p>

JavaScript

// Sélectionner l'élément avec id="titre"
const titre = document.getElementById("titre");

console.log(titre);  // <h1 id="titre">Bonjour</h1>

// SĂ©lectionner le paragraphe
const para = document.getElementById("paragraphe");

console.log(para);  // <p id="paragraphe">...</p>

✅ Avantages

⚠ Limitations

getElementsByClassName : Par classe 📚

Sélectionne tous les éléments ayant une classe spécifique.

HTML

<p class="important">Premier paragraphe</p>
<p class="normal">DeuxiĂšme paragraphe</p>
<p class="important">TroisiĂšme paragraphe</p>

JavaScript

// Sélectionner TOUS les éléments avec class="important"
const elements = document.getElementsByClassName("important");

console.log(elements);        // HTMLCollection [p.important, p.important]
console.log(elements.length); // 2

// Accéder au premier élément
console.log(elements[0]);  // <p class="important">Premier...</p>

// Parcourir tous les éléments
for (let element of elements) {
    console.log(element.textContent);
}

⚠ Important : Retourne une HTMLCollection (liste dynamique), pas un tableau ! Convertis-la si besoin : Array.from(elements)

getElementsByTagName : Par balise đŸ·ïž

Sélectionne tous les éléments d'un type de balise.

HTML

<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
<div>Une div</div>
<p>Paragraphe 3</p>

JavaScript

// SĂ©lectionner TOUS les paragraphes
const paragraphes = document.getElementsByTagName("p");

console.log(paragraphes.length);  // 3

// Parcourir
for (let p of paragraphes) {
    console.log(p.textContent);
}

// SĂ©lectionner toutes les div
const divs = document.getElementsByTagName("div");
console.log(divs.length);  // 1

Cas d'usage

// Compter tous les liens de la page
const liens = document.getElementsByTagName("a");
console.log(`Il y a ${liens.length} liens sur cette page`);

querySelector : SĂ©lecteur CSS moderne 🎯

querySelector utilise la syntaxe CSS pour sélectionner le premier élément qui correspond.

✅ La mĂ©thode MODERNE recommandĂ©e !

Plus flexible et puissante que les anciennes méthodes.

// Par ID (comme getElementById)
const titre = document.querySelector("#titre");

// Par classe (premier élément avec cette classe)
const important = document.querySelector(".important");

// Par balise (premier élément de ce type)
const premierP = document.querySelector("p");

// Sélecteurs combinés
const lienDansDiv = document.querySelector("div a");
const premierLi = document.querySelector("ul li");

// SĂ©lecteurs complexes
const inputEmail = document.querySelector('input[type="email"]');
const premierEnfant = document.querySelector("ul > li:first-child");
const dernierP = document.querySelector("p:last-of-type");

Syntaxe CSS : Utilise EXACTEMENT la mĂȘme syntaxe que CSS (#id, .classe, balise, etc.)

querySelectorAll : Tous les Ă©lĂ©ments 📚

querySelectorAll sélectionne TOUS les éléments qui correspondent au sélecteur CSS.

// Tous les éléments avec class="important"
const importants = document.querySelectorAll(".important");

console.log(importants);        // NodeList [p.important, p.important]
console.log(importants.length); // 2

// Tous les paragraphes
const tousLesP = document.querySelectorAll("p");

// Tous les liens dans une div
const liensDansDiv = document.querySelectorAll("div a");

// Parcourir (NodeList a forEach !)
importants.forEach((element) => {
    console.log(element.textContent);
});

// Ou avec for...of
for (let element of importants) {
    console.log(element);
}

querySelector

Retourne 1 seul élément (le premier)

Retourne null si rien trouvé

querySelectorAll

Retourne TOUS les éléments

Retourne une NodeList (vide si rien)

Comment fonctionne querySelector ? 🔍

Comprendre en détail ce qui se passe quand on utilise querySelector.

HTML de départ

<div class="container">
    <p class="texte">Premier paragraphe</p>
    <p class="texte important">DeuxiĂšme paragraphe</p>
    <p class="texte">TroisiĂšme paragraphe</p>
</div>

JavaScript : Chercher le premier .texte

const element = document.querySelector(".texte");
Étape 1 : JavaScript part du dĂ©but du document
Étape 2 : Il parcourt l'arbre DOM
Étape 3 : Il trouve le PREMIER Ă©lĂ©ment avec class="texte"
Étape 4 : Il ARRÊTE la recherche (mĂȘme s'il y en a d'autres)
Étape 5 : Il retourne cet Ă©lĂ©ment dans la variable "element" 
console.log(element);
// <p class="texte">Premier paragraphe</p>

console.log(element.textContent);
// "Premier paragraphe"

// ⚠ Les autres <p class="texte"> ne sont PAS sĂ©lectionnĂ©s !

Comment fonctionne querySelectorAll ? 📋

Maintenant avec querySelectorAll, la différence importante.

MĂȘme HTML

<div class="container">
    <p class="texte">Premier paragraphe</p>
    <p class="texte important">DeuxiĂšme paragraphe</p>
    <p class="texte">TroisiĂšme paragraphe</p>
</div>

JavaScript : Chercher TOUS les .texte

const elements = document.querySelectorAll(".texte");
Étape 1 : JavaScript part du dĂ©but du document
Étape 2 : Il parcourt TOUT l'arbre DOM
Étape 3 : Il trouve le 1er Ă©lĂ©ment avec class="texte" → le garde
Étape 4 : Il continue et trouve le 2ùme → le garde aussi
Étape 5 : Il continue et trouve le 3ùme → le garde aussi
Étape 6 : Il arrive à la fin du document
Étape 7 : Il retourne une LISTE (NodeList) avec les 3 Ă©lĂ©ments 
console.log(elements);
// NodeList(3) [p.texte, p.texte.important, p.texte]

console.log(elements.length);  // 3

console.log(elements[0].textContent);  // "Premier paragraphe"
console.log(elements[1].textContent);  // "DeuxiĂšme paragraphe"
console.log(elements[2].textContent);  // "TroisiĂšme paragraphe"

C'est quoi une NodeList ? 📩

Une NodeList ressemble Ă  un tableau, mais ce n'est pas EXACTEMENT un tableau !

Analogie : La cagette de fruits đŸ§ș

Imagine une cagette qui contient plusieurs fruits. C'est comme une NodeList : tu peux compter les fruits (length), prendre un fruit précis (index), et parcourir tous les fruits (forEach), mais tu ne peux pas faire TOUTES les opérations d'un vrai panier (comme map ou filter directement).

Opération NodeList Vrai Tableau
Accùs par index ✅ list[0] ✅ arr[0]
PropriĂ©tĂ© length ✅ list.length ✅ arr.length
forEach ✅ list.forEach() ✅ arr.forEach()
map, filter, reduce ❌ Pas disponibles ✅ Disponibles

Convertir en vrai tableau si besoin

const nodeList = document.querySelectorAll(".texte");

// Convertir en tableau
const tableau = Array.from(nodeList);
// Ou avec spread
const tableau2 = [...nodeList];

// Maintenant on peut utiliser map, filter, etc.
const textes = tableau.map(el => el.textContent);
console.log(textes);  // ["Premier...", "DeuxiĂšme...", "TroisiĂšme..."]

Quelle mĂ©thode utiliser ? đŸ€”

MĂ©thode Retourne Moderne ? Utilisation
getElementById 1 Ă©lĂ©ment ❌ Ancienne Rapide pour un ID
getElementsByClassName HTMLCollection ❌ Ancienne Plusieurs Ă©lĂ©ments par classe
getElementsByTagName HTMLCollection ❌ Ancienne Tous les Ă©lĂ©ments d'un type
querySelector 1 Ă©lĂ©ment ✅ Moderne SĂ©lecteur CSS, 1 Ă©lĂ©ment
querySelectorAll NodeList ✅ Moderne SĂ©lecteur CSS, tous les Ă©lĂ©ments

💡 Recommandation moderne

Utilise querySelector et querySelectorAll par défaut ! Plus flexibles et puissantes.

// ✅ Moderne (recommandĂ©)
const titre = document.querySelector("#titre");
const importants = document.querySelectorAll(".important");

// ❌ Ancien (fonctionne mais moins flexible)
const titre = document.getElementById("titre");
const importants = document.getElementsByClassName("important");
# ✏ Partie 2

Modifier le Contenu

Changer le texte et le HTML

textContent : Modifier le texte 📝

textContent permet de lire ou modifier le texte brut d'un élément.

HTML

<h1 id="titre">Ancien titre</h1>
<p id="texte">Ancien paragraphe</p>

JavaScript : Lire le contenu

const titre = document.querySelector("#titre");

console.log(titre.textContent);  // "Ancien titre"

JavaScript : Modifier le contenu

// Changer le texte
titre.textContent = "Nouveau titre";

const para = document.querySelector("#texte");
para.textContent = "Nouveau paragraphe !";

RĂ©sultat dans le navigateur :

<h1 id="titre">Nouveau titre</h1>
<p id="texte">Nouveau paragraphe !</p>

⚠ Attention : textContent traite tout comme du TEXTE. Si tu mets du HTML, il sera affichĂ© comme du texte brut !

titre.textContent = "<strong>Gras</strong>";
// Affiche : <strong>Gras</strong> (pas en gras !)

Comment textContent fonctionne en dĂ©tail ? ⚙

DĂ©composons ce qui se passe Ă©tape par Ă©tape quand on utilise textContent.

Situation de départ

<p id="message">Bonjour tout le monde</p>
DOM en mémoire :

<p id="message">
└── NƓud texte: "Bonjour tout le monde"
</p>

Étape 1 : SĂ©lectionner l'Ă©lĂ©ment

const message = document.querySelector("#message");
✅ JavaScript crĂ©e une rĂ©fĂ©rence vers l'Ă©lĂ©ment <p> dans le DOM
✅ La variable "message" pointe maintenant vers cet Ă©lĂ©ment
✅ On peut maintenant le manipuler

Étape 2 : Lire le texte

console.log(message.textContent);
1. JavaScript va chercher l'élément dans le DOM
2. Il récupÚre TOUT le texte à l'intérieur (ignorant les balises HTML)
3. Il retourne: "Bonjour tout le monde"
4. console.log() affiche ce texte

Étape 3 : Modifier le texte

message.textContent = "Nouveau message";
1. JavaScript accÚde à l'élément <p> dans le DOM
2. Il SUPPRIME tout le contenu texte actuel
3. Il INSÈRE le nouveau texte "Nouveau message"
4. Le navigateur RAFRAÎCHIT l'affichage automatiquement
5. L'utilisateur voit immédiatement le changement

RĂ©sultat final dans le DOM

DOM en mémoire (mis à jour) :

<p id="message">
└── NƓud texte: "Nouveau message"
</p>

Que se passe-t-il avec des balises HTML ? đŸ€”

Voyons ce qui arrive si l'élément contient du HTML...

HTML avec balises à l'intérieur

<div id="contenu">
    <p>Premier paragraphe</p>
    <p>DeuxiĂšme <strong>paragraphe</strong></p>
</div>

Lire avec textContent

const contenu = document.querySelector("#contenu");

console.log(contenu.textContent);
Résultat affiché :

Premier paragraphe
DeuxiĂšme paragraphe

Les balises <p> et <strong> sont IGNORÉES !
Seul le TEXTE est récupéré !

Que se passe-t-il exactement ?

  1. JavaScript parcourt le DOM
    Il entre dans la <div> et explore tous les enfants
  2. Il extrait UNIQUEMENT le texte
    Il ignore toutes les balises HTML (<p>, <strong>, etc.)
  3. Il concatĂšne tous les textes
    Il met tous les textes bout Ă  bout
  4. Il retourne une chaĂźne de caractĂšres
    Le résultat est du texte pur, sans HTML

Utilité : Parfait pour récupérer uniquement le contenu textuel sans se soucier de la structure HTML !

innerHTML : Modifier le HTML đŸ—ïž

innerHTML permet de lire ou modifier le HTML complet d'un élément.

HTML

<div id="container">
  <p>Ancien contenu</p>
</div>

JavaScript : Lire le HTML

const container = document.querySelector("#container");

console.log(container.innerHTML);
// "<p>Ancien contenu</p>"

JavaScript : Modifier le HTML

// Remplacer tout le contenu
container.innerHTML = "<h2>Nouveau titre</h2><p>Nouveau texte</p>";

// Ajouter du HTML
container.innerHTML += "<p>Paragraphe ajouté</p>";

RĂ©sultat dans le navigateur :

<div id="container">
  <h2>Nouveau titre</h2>
  <p>Nouveau texte</p>
  <p>Paragraphe ajouté</p>
</div>

Comment innerHTML fonctionne en dĂ©tail ? 🔬

Comprendre ce qui se passe vraiment quand on utilise innerHTML.

Situation de départ

<div id="box"><p>Texte original</p></div>
Structure DOM :

<div id="box">
└── <p>
└── "Texte original"

Étape 1 : Lire le HTML

const box = document.querySelector("#box");
console.log(box.innerHTML);
1. JavaScript accÚde à l'élément <div>
2. Il récupÚre TOUT son contenu HTML (balises comprises)
3. Il le convertit en CHAÎNE DE CARACTÈRES
4. Retourne: "<p>Texte original</p>"

⚠ C'est une STRING, pas du vrai HTML !

Étape 2 : Modifier le HTML

box.innerHTML = "<h2>Titre</h2><p>Nouveau</p>";
1. JavaScript reçoit la chaßne HTML
2. Il DÉTRUIT complùtement l'ancien contenu de <div>
3. Il PARSE la nouvelle chaĂźne (analyse le HTML)
4. Il CRÉE de nouveaux Ă©lĂ©ments DOM (<h2> et <p>)
5. Il les INSÈRE dans la <div>
6. Le navigateur RAFRAÎCHIT l'affichage

RĂ©sultat final dans le DOM

Nouvelle structure DOM :

<div id="box">
├── <h2>
│ └── "Titre"
└── <p>
└── "Nouveau"

⚠ Important : L'ancien <p> a Ă©tĂ© COMPLÈTEMENT supprimĂ© et remplacĂ© !

innerHTML : Dans les coulisses du navigateur 🎬

Voyons en détail ce que fait le navigateur quand on utilise innerHTML.

Code JavaScript

const div = document.querySelector("#box");
div.innerHTML = "<p class='info'>Hello <strong>World</strong>!</p>";
  1. JavaScript envoie la commande au navigateur
    "Change le contenu HTML de cette div"
  2. Le navigateur analyse la chaĂźne HTML (parsing)
    Il lit caractĂšre par caractĂšre : "<p class='info'>..."
  3. Le parseur HTML identifie les balises
    Il reconnaĂźt : <p>, class="info", <strong>, texte, etc.
  4. Il crée les objets DOM correspondants
    ‱ Objet Element pour <p>
    ‱ Objet Attribute pour class="info"
    ‱ Objet Element pour <strong>
    ‱ Objets Text pour "Hello " et "World" et "!"
  5. Il construit l'arbre DOM
    Il organise ces objets en arbre hiérarchique
  6. Il insĂšre cet arbre dans le DOM principal
    Il remplace l'ancien contenu de la div
  7. Le moteur de rendu affiche les changements
    L'utilisateur voit immédiatement le nouveau contenu

Tout ça se passe en quelques millisecondes ! Le navigateur est trĂšs rapide, mais c'est quand mĂȘme un processus complexe.

innerHTML : Ajouter vs Remplacer 🔄

Attention à la différence entre remplacer et ajouter !

HTML de départ

<div id="liste">
    <p>Item 1</p>
    <p>Item 2</p>
</div>

❌ REMPLACER (= Ă©crase tout)

const liste = document.querySelector("#liste");

liste.innerHTML = "<p>Item 3</p>";

// RĂ©sultat :
// <div id="liste">
//     <p>Item 3</p>
// </div>

// ❌ Item 1 et Item 2 sont PERDUS !

✅ AJOUTER (avec +=)

const liste = document.querySelector("#liste");

liste.innerHTML += "<p>Item 3</p>";

// RĂ©sultat :
// <div id="liste">
//     <p>Item 1</p>
//     <p>Item 2</p>
//     <p>Item 3</p>
// </div>

// ✅ Item 1 et 2 sont conservĂ©s !

⚠ ProblĂšme avec += :

Quand tu fais innerHTML +=, le navigateur doit :

  1. Lire tout le HTML existant
  2. Le convertir en string
  3. Ajouter la nouvelle string
  4. TOUT re-parser et re-créer

C'est lent si répété beaucoup ! PréfÚre appendChild ou append pour ajouter des éléments un par un.

textContent vs innerHTML 🆚

Caractéristique textContent innerHTML
Contenu Texte brut uniquement HTML complet
Balises HTML Affichées comme texte Interprétées comme HTML
SĂ©curitĂ© ✅ SĂ»r (pas de XSS) ⚠ Risque XSS si input utilisateur
Performance ✅ Plus rapide ❌ Plus lent (parse HTML)
Usage Texte simple Structure HTML complexe

textContent

element.textContent = "Bonjour";
// RĂ©sultat : Bonjour

element.textContent = "<b>Gras</b>";
// RĂ©sultat : <b>Gras</b>

innerHTML

element.innerHTML = "Bonjour";
// RĂ©sultat : Bonjour

element.innerHTML = "<b>Gras</b>";
// RĂ©sultat : Gras

Conseil : PréfÚre textContent pour du texte simple (plus sûr et rapide). Utilise innerHTML uniquement si tu as besoin de HTML.

# 🎹 Partie 3

Modifier les Styles

CSS dynamique avec JavaScript

PropriĂ©tĂ© style : Styles inline 🎹

La propriété style permet de modifier les styles CSS directement.

HTML

<p id="texte">Mon paragraphe</p>

JavaScript

const texte = document.querySelector("#texte");

// Changer la couleur
texte.style.color = "red";

// Changer la taille
texte.style.fontSize = "24px";

// Changer le fond
texte.style.backgroundColor = "yellow";

// Changer plusieurs propriétés
texte.style.padding = "20px";
texte.style.border = "2px solid blue";
texte.style.borderRadius = "10px";

⚠ Attention aux noms de propriĂ©tĂ©s !

En CSS : background-color
En JavaScript : backgroundColor (camelCase !)

// ❌ ERREUR
element.style.background-color = "red";

// ✅ CORRECT
element.style.backgroundColor = "red";

PropriĂ©tĂ©s CSS courantes en JS 📋

CSS JavaScript Exemple
color color element.style.color = "red"
background-color backgroundColor element.style.backgroundColor = "#fff"
font-size fontSize element.style.fontSize = "20px"
font-weight fontWeight element.style.fontWeight = "bold"
margin margin element.style.margin = "10px"
padding padding element.style.padding = "20px"
border border element.style.border = "1px solid black"
display display element.style.display = "none" 
// Exemple complet
const box = document.querySelector(".box");

box.style.width = "200px";
box.style.height = "200px";
box.style.backgroundColor = "#4caf50";
box.style.color = "white";
box.style.display = "flex";
box.style.justifyContent = "center";
box.style.alignItems = "center";
box.style.borderRadius = "15px";

classList : GĂ©rer les classes CSS đŸ·ïž

classList permet d'ajouter, retirer ou basculer des classes CSS (méthode recommandée !).

HTML

<p id="texte" class="normal">Mon paragraphe</p>

CSS

.normal {
    color: black;
}

.important {
    color: red;
    font-weight: bold;
    font-size: 20px;
}

.highlight {
    background-color: yellow;
}

JavaScript

const texte = document.querySelector("#texte");

// Ajouter une classe
texte.classList.add("important");
// <p class="normal important">...</p>

// Retirer une classe
texte.classList.remove("normal");
// <p class="important">...</p>

// Basculer (toggle) une classe
texte.classList.toggle("highlight");
// Si la classe existe → la retire
// Si la classe n'existe pas → l'ajoute

// VĂ©rifier si une classe existe
if (texte.classList.contains("important")) {
    console.log("Le texte est important");
}

MĂ©thodes de classList đŸ› ïž

MĂ©thode Action Exemple
add() Ajoute une ou plusieurs classes element.classList.add("classe1", "classe2")
remove() Retire une ou plusieurs classes element.classList.remove("classe")
toggle() Bascule une classe (ajoute/retire) element.classList.toggle("actif")
contains() VĂ©rifie si la classe existe element.classList.contains("classe")
replace() Remplace une classe par une autre element.classList.replace("old", "new")

Exemple pratique : Toggle de menu

const menu = document.querySelector("#menu");
const bouton = document.querySelector("#toggle-btn");

bouton.addEventListener("click", () => {
    menu.classList.toggle("ouvert");
    // Si "ouvert" existe → le retire (ferme le menu)
    // Si "ouvert" n'existe pas → l'ajoute (ouvre le menu)
});

💡 Conseil : PrĂ©fĂšre classList Ă  la manipulation directe de style. C'est plus propre et maintenable !

# đŸ·ïž Partie 4

GĂ©rer les Attributs

Manipuler id, class, href, src...

getAttribute et setAttribute 🔧

Lire et modifier n'importe quel attribut HTML.

HTML

<img id="photo" src="ancienne.jpg" alt="Photo">
<a id="lien" href="https://example.com">Lien</a>
<input id="email" type="email" placeholder="Email">

JavaScript : Lire un attribut

const img = document.querySelector("#photo");

console.log(img.getAttribute("src"));  // "ancienne.jpg"
console.log(img.getAttribute("alt"));  // "Photo"

const lien = document.querySelector("#lien");
console.log(lien.getAttribute("href"));  // "https://example.com"

JavaScript : Modifier un attribut

// Changer la source de l'image
img.setAttribute("src", "nouvelle.jpg");

// Changer le lien
lien.setAttribute("href", "https://google.com");

// Changer le placeholder
const input = document.querySelector("#email");
input.setAttribute("placeholder", "Entrez votre email");

PropriĂ©tĂ©s directes ⚡

Pour les attributs courants, on peut utiliser des propriétés directes (plus simple !).

Avec getAttribute/setAttribute

const img = document.querySelector("img");

img.getAttribute("src");
img.setAttribute("src", "photo.jpg");

const lien = document.querySelector("a");
lien.getAttribute("href");
lien.setAttribute("href", "url.com");

Avec propriétés (plus simple)

const img = document.querySelector("img");

img.src;
img.src = "photo.jpg";

const lien = document.querySelector("a");
lien.href;
lien.href = "url.com";

Propriétés courantes

// Images
img.src = "nouvelle.jpg";
img.alt = "Description";

// Liens
lien.href = "https://google.com";
lien.target = "_blank";

// Inputs
input.value = "Texte";
input.placeholder = "Entrez...";
input.type = "password";
input.disabled = true;

// ÉlĂ©ments gĂ©nĂ©raux
element.id = "nouvel-id";
element.className = "classe1 classe2";

💡 Conseil : Utilise les propriĂ©tĂ©s directes quand elles existent. C'est plus simple et lisible !

hasAttribute et removeAttribute đŸ—‘ïž

hasAttribute : VĂ©rifier si un attribut existe

const input = document.querySelector("#email");

// VĂ©rifier si l'attribut existe
if (input.hasAttribute("required")) {
    console.log("Ce champ est obligatoire");
}

if (!input.hasAttribute("disabled")) {
    console.log("Ce champ est actif");
}

removeAttribute : Supprimer un attribut

const input = document.querySelector("#email");

// Supprimer l'attribut disabled
input.removeAttribute("disabled");

// Supprimer le placeholder
input.removeAttribute("placeholder");

Exemple pratique : Activer/désactiver un bouton

const bouton = document.querySelector("#submit-btn");

// DĂ©sactiver le bouton
bouton.setAttribute("disabled", "true");
// ou plus simple :
bouton.disabled = true;

// RĂ©activer le bouton
bouton.removeAttribute("disabled");
// ou :
bouton.disabled = false;

Attributs data-* 📊

Les attributs data-* permettent de stocker des données personnalisées dans le HTML.

HTML

<div id="user" data-id="123" data-role="admin" data-age="25">
    Marie Dupont
</div>

<button data-action="delete" data-item-id="42">Supprimer</button>

JavaScript : Accéder avec dataset

const user = document.querySelector("#user");

// Lire les données
console.log(user.dataset.id);    // "123"
console.log(user.dataset.role);  // "admin"
console.log(user.dataset.age);   // "25"

// Modifier
user.dataset.age = "26";

// Ajouter
user.dataset.email = "[email protected]";

// Le HTML devient :
// <div data-id="123" data-role="admin" data-age="26" data-email="[email protected]">

RĂšgle de nommage

HTML : data-nom-compose
JavaScript : dataset.nomCompose (camelCase)

// HTML : data-user-name
// JavaScript : dataset.userName
# đŸ—ïž Partie 5

CrĂ©er et Supprimer des ÉlĂ©ments

Modifier la structure du DOM

createElement : CrĂ©er un Ă©lĂ©ment 🆕

createElement crée un nouvel élément HTML (mais ne l'ajoute pas encore à la page).

Étape 1 : CrĂ©er l'Ă©lĂ©ment

// Créer un nouveau paragraphe
const p = document.createElement("p");

// Créer une div
const div = document.createElement("div");

// Créer un bouton
const bouton = document.createElement("button");

Étape 2 : Configurer l'Ă©lĂ©ment

// Ajouter du contenu
p.textContent = "Ceci est un nouveau paragraphe";

// Ajouter des classes
p.classList.add("important", "nouveau");

// Ajouter des styles
p.style.color = "blue";

// Ajouter des attributs
p.setAttribute("data-id", "123");
p.id = "mon-paragraphe";

Étape 3 : Ajouter à la page

// SĂ©lectionner le conteneur
const container = document.querySelector("#container");

// Ajouter le paragraphe dedans
container.appendChild(p);

RĂ©sultat :

<div id="container">
    <p id="mon-paragraphe" class="important nouveau" data-id="123">
        Ceci est un nouveau paragraphe
    </p>
</div>

appendChild et append : Ajouter des Ă©lĂ©ments 📌

appendChild : Ajouter un enfant (ancienne méthode)

const container = document.querySelector("#container");
const p = document.createElement("p");
p.textContent = "Nouveau paragraphe";

container.appendChild(p);  // Ajoute Ă  la fin

append : Ajouter un ou plusieurs éléments (moderne)

const container = document.querySelector("#container");

// Ajouter plusieurs éléments
const p1 = document.createElement("p");
p1.textContent = "Paragraphe 1";

const p2 = document.createElement("p");
p2.textContent = "Paragraphe 2";

container.append(p1, p2);

// On peut mĂȘme ajouter du texte directement
container.append("Texte simple");

appendChild

  • Un seul Ă©lĂ©ment Ă  la fois
  • Seulement des Ă©lĂ©ments (nodes)
  • Ancienne mĂ©thode

append

  • Plusieurs Ă©lĂ©ments en une fois
  • ÉlĂ©ments ET texte
  • Moderne (recommandĂ©)

Autres mĂ©thodes d'insertion 📍

prepend : Ajouter au début

const container = document.querySelector("#container");
const p = document.createElement("p");
p.textContent = "Je serai en premier";

container.prepend(p);  // Ajoute au début (avant les autres)

before : Insérer avant un élément

const element = document.querySelector("#element");
const nouveau = document.createElement("p");
nouveau.textContent = "Inséré avant";

element.before(nouveau);  // InsÚre AVANT l'élément

after : Insérer aprÚs un élément

const element = document.querySelector("#element");
const nouveau = document.createElement("p");
nouveau.textContent = "Inséré aprÚs";

element.after(nouveau);  // InsÚre APRÈS l'élément
<container>
prepend() ← Ajoute ici (dĂ©but)
before() ← Avant cet Ă©lĂ©ment
<element>ÉlĂ©ment existant</element>
after() ← AprĂšs cet Ă©lĂ©ment
append() ← Ajoute ici (fin)
</container>

remove : Supprimer un Ă©lĂ©ment đŸ—‘ïž

remove() supprime un élément du DOM.

HTML

<div id="container">
    <p id="p1">Paragraphe 1</p>
    <p id="p2">Paragraphe 2</p>
    <p id="p3">Paragraphe 3</p>
</div>

JavaScript

// Supprimer un élément spécifique
const p2 = document.querySelector("#p2");
p2.remove();

// RĂ©sultat : le paragraphe 2 disparaĂźt complĂštement

Supprimer tous les enfants

const container = document.querySelector("#container");

// MĂ©thode 1 : Vider le container
container.innerHTML = "";

// MĂ©thode 2 : Supprimer les enfants un par un
while (container.firstChild) {
    container.firstChild.remove();
}

⚠ Attention : Une fois supprimĂ©, l'Ă©lĂ©ment est perdu ! Pense Ă  le sauvegarder dans une variable si tu veux le rĂ©utiliser.

cloneNode : Cloner un Ă©lĂ©ment 📋

cloneNode() crée une copie d'un élément.

HTML

<div id="original" class="box">
    <h2>Titre</h2>
    <p>Contenu</p>
</div>

JavaScript

const original = document.querySelector("#original");

// Clone superficiel (sans les enfants)
const clone1 = original.cloneNode(false);
console.log(clone1);  // <div id="original" class="box"></div>

// Clone profond (avec tous les enfants)
const clone2 = original.cloneNode(true);
console.log(clone2);
// <div id="original" class="box">
//     <h2>Titre</h2>
//     <p>Contenu</p>
// </div>

// Modifier le clone
clone2.id = "copie";
clone2.querySelector("h2").textContent = "Copie du titre";

// Ajouter le clone Ă  la page
document.body.append(clone2);

💡 Conseil : Utilise presque toujours cloneNode(true) pour cloner l'Ă©lĂ©ment ET ses enfants.

# đŸ–±ïž Partie 6

Les ÉvĂ©nements

RĂ©agir aux actions de l'utilisateur

C'est quoi un Ă©vĂ©nement ? 🎯

Un événement est une action qui se produit sur la page : clic, frappe clavier, soumission de formulaire...

Analogie : Le dĂ©tecteur de mouvement 🚹

Un événement, c'est comme un détecteur de mouvement. Tu installes un capteur (addEventListener) sur un élément. Quand quelque chose se passe (clic, survol...), le capteur se déclenche et exécute une action (ta fonction callback).

1. Sélectionner un élément
2. Écouter un Ă©vĂ©nement (click, submit...)
3. DĂ©finir ce qui se passe (fonction callback)
4. Quand l'Ă©vĂ©nement arrive → fonction exĂ©cutĂ©e !

ÉvĂ©nements courants

Le cycle de vie d'un Ă©vĂ©nement 🔄

Comprendre tout le processus depuis l'action de l'utilisateur jusqu'à l'exécution du code.

Exemple concret : Un clic sur un bouton

  1. L'utilisateur clique sur le bouton
    Action physique : le doigt appuie sur la souris
  2. Le systÚme d'exploitation détecte le clic
    Windows/Mac/Linux capte l'action matérielle
  3. Le navigateur reçoit l'information
    "Un clic a eu lieu aux coordonnées (X, Y)"
  4. Le navigateur identifie l'élément cliqué
    Il calcule quel élément HTML se trouve à ces coordonnées
  5. Le navigateur crée un objet Event
    Objet contenant toutes les infos sur le clic
  6. Le navigateur cherche les listeners
    "Y a-t-il un addEventListener sur cet élément ?"
  7. Le navigateur exécute les fonctions callback
    Toutes les fonctions enregistrées sont appelées
  8. Ton code JavaScript s'exécute
    Ta fonction personnalisée fait son travail

Tout ça en quelques millisecondes ! Le navigateur est extrĂȘmement rapide.

addEventListener : Écouter un Ă©vĂ©nement 👂

addEventListener est LA méthode moderne pour gérer les événements.

element.addEventListener("nomEvenement", fonctionCallback);

HTML

<button id="btn">Clique-moi</button>
<p id="message"></p>

JavaScript

const bouton = document.querySelector("#btn");
const message = document.querySelector("#message");

// Écouter le clic
bouton.addEventListener("click", function() {
    message.textContent = "Bouton cliqué !";
});

// Avec arrow function (plus moderne)
bouton.addEventListener("click", () => {
    message.textContent = "Bouton cliqué !";
});

Ce qui se passe :

1. L'utilisateur clique sur le bouton
2. L'événement "click" est détecté
3. La fonction callback s'exécute
4. Le texte du message change

addEventListener : Comment ça marche exactement ? 🔍

DĂ©composons ligne par ligne ce code :

const bouton = document.querySelector("#btn");

bouton.addEventListener("click", () => {
    console.log("Cliqué !");
});

Ligne 1 : Sélection de l'élément

const bouton = document.querySelector("#btn");

1. Cherche dans le DOM un élément avec id="btn"
2. Retourne une référence vers cet élément
3. Stocke cette référence dans la variable "bouton"
4. Maintenant "bouton" pointe vers l'élément <button> dans le DOM

Ligne 2-4 : Ajout de l'écouteur d'événement

bouton.addEventListener("click", () => {...});

1. "addEventListener" = "Ajoute un écouteur d'événement"
2. Premier paramÚtre "click" = le TYPE d'événement à écouter
3. DeuxiÚme paramÚtre = la FONCTION à exécuter quand ça arrive
4. Cette fonction est stockée en mémoire, en attente

Que se passe-t-il en mémoire ?

Le navigateur crée une "liste d'écouteurs" pour cet élément :

ÉlĂ©ment: <button id="btn">
└── Écouteurs d'Ă©vĂ©nements :
└── Type: "click"
└── Fonction: () => { console.log("CliquĂ© !"); }

Le navigateur surveille maintenant cet élément
DĂšs qu'un clic arrive → il exĂ©cutera la fonction

Pourquoi addEventListener et pas onclick ? đŸ€”

Il existe d'autres façons d'ajouter des événements. Pourquoi addEventListener est meilleur ?

❌ Ancienne mĂ©thode : onclick

// Dans le HTML
<button onclick="faire()">

// Ou en JS
bouton.onclick = function() {
    console.log("Cliqué");
};

ProblĂšmes :

  • ❌ Un seul Ă©vĂ©nement possible
  • ❌ MĂ©lange HTML et JavaScript
  • ❌ Difficile Ă  maintenir

✅ MĂ©thode moderne : addEventListener

// En JavaScript uniquement
bouton.addEventListener("click", () => {
    console.log("Cliqué");
});

Avantages :

  • ✅ Plusieurs Ă©vĂ©nements possibles
  • ✅ SĂ©paration HTML/JS
  • ✅ Meilleure organisation
  • ✅ PossibilitĂ© de retirer l'Ă©vĂ©nement

Exemple : Plusieurs listeners sur le mĂȘme Ă©lĂ©ment

const bouton = document.querySelector("#btn");

// Premier listener
bouton.addEventListener("click", () => {
    console.log("Action 1");
});

// DeuxiĂšme listener (POSSIBLE avec addEventListener !)
bouton.addEventListener("click", () => {
    console.log("Action 2");
});

// Les DEUX s'exécutent quand on clique !

// ❌ Impossible avec onclick (Ă©crase le premier)
bouton.onclick = () => console.log("Action 1");
bouton.onclick = () => console.log("Action 2");  // Écrase la premiùre !

L'objet event : Informations sur l'Ă©vĂ©nement 📊

La fonction callback reçoit automatiquement un objet event avec des infos sur l'événement.

const bouton = document.querySelector("#btn");

bouton.addEventListener("click", (event) => {
    console.log(event);  // Objet MouseEvent complet
    
    // Propriétés utiles
    console.log(event.type);    // "click"
    console.log(event.target);  // L'élément cliqué (<button>)
    console.log(event.clientX); // Position X du clic
    console.log(event.clientY); // Position Y du clic
});

event.target : L'élément qui a déclenché l'événement

const boutons = document.querySelectorAll(".btn");

boutons.forEach((bouton) => {
    bouton.addEventListener("click", (event) => {
        // event.target = le bouton précis qui a été cliqué
        console.log(event.target.textContent);
        event.target.style.backgroundColor = "green";
    });
});

preventDefault : EmpĂȘcher le comportement par dĂ©faut

const lien = document.querySelector("a");

lien.addEventListener("click", (event) => {
    event.preventDefault();  // EmpĂȘche de suivre le lien
    console.log("Lien cliqué mais pas suivi !");
});

L'objet event : Qu'est-ce que c'est vraiment ? 🔬

L'objet event est créé automatiquement par le navigateur et contient TOUTES les informations sur ce qui s'est passé.

Analogie : Le rapport de police 📋

Imagine qu'un Ă©vĂ©nement est comme un incident. Le navigateur est comme un policier qui rĂ©dige un rapport complet : qui, quoi, quand, oĂč, comment... L'objet event, c'est ce rapport !

Que contient l'objet event ?

bouton.addEventListener("click", (event) => {
    console.log(event);
});
MouseEvent {
type: "click", // Type d'événement
target: <button>, // ÉlĂ©ment qui a Ă©tĂ© cliquĂ©
currentTarget: <button>, // ÉlĂ©ment qui a le listener
clientX: 245, // Position X du clic
clientY: 156, // Position Y du clic
button: 0, // Bouton de souris (0=gauche)
ctrlKey: false, // Ctrl pressé ?
shiftKey: false, // Shift pressé ?
altKey: false, // Alt pressé ?
timeStamp: 1234567.89, // Moment précis
... et beaucoup d'autres propriétés
}

event.target : L'Ă©lĂ©ment cliquĂ© 🎯

event.target est l'élément EXACT qui a déclenché l'événement.

Exemple concret

<div id="container">
    <button class="btn">Bouton 1</button>
    <button class="btn">Bouton 2</button>
    <button class="btn">Bouton 3</button>
</div>
const boutons = document.querySelectorAll(".btn");

boutons.forEach((bouton) => {
    bouton.addEventListener("click", (event) => {
        console.log(event.target);
        console.log(event.target.textContent);
    });
});
Si on clique sur "Bouton 1" :
→ event.target = <button>Bouton 1</button>
→ event.target.textContent = "Bouton 1"

Si on clique sur "Bouton 2" :
→ event.target = <button>Bouton 2</button>
→ event.target.textContent = "Bouton 2"

event.target change selon oĂč on clique !

Utilité pratique

// Changer la couleur du bouton cliqué
boutons.forEach((bouton) => {
    bouton.addEventListener("click", (event) => {
        event.target.style.backgroundColor = "green";
    });
});

// Afficher quel bouton a été cliqué
boutons.forEach((bouton) => {
    bouton.addEventListener("click", (event) => {
        alert(`Tu as cliqué sur : ${event.target.textContent}`);
    });
});

event.preventDefault() : Bloquer le comportement par dĂ©faut đŸš«

Certains Ă©lĂ©ments HTML ont des comportements par dĂ©faut. preventDefault() permet de les empĂȘcher.

Comportements par défaut courants

Exemple 1 : EmpĂȘcher un lien de fonctionner

<a href="https://google.com" id="lien">Cliquez</a>
const lien = document.querySelector("#lien");

lien.addEventListener("click", (event) => {
    event.preventDefault();  // ← EmpĂȘche de suivre le lien
    
    console.log("Lien cliqué mais on ne va pas sur Google !");
    // On peut faire autre chose Ă  la place
});
Sans preventDefault() :
1. Utilisateur clique sur le lien
2. La fonction s'exécute
3. Le navigateur suit le lien → va sur Google

Avec preventDefault() :
1. Utilisateur clique sur le lien
2. La fonction s'exécute
3. preventDefault() dit "STOP, ne suis pas le lien"
4. Le navigateur ne fait rien → reste sur la page

preventDefault() avec les formulaires 📝

Cas d'usage le PLUS courant : empĂȘcher le rechargement de page lors de la soumission d'un formulaire.

Le problĂšme sans preventDefault

<form id="monForm">
    <input type="text" id="nom">
    <button type="submit">Envoyer</button>
</form>
const form = document.querySelector("#monForm");

form.addEventListener("submit", () => {
    const nom = document.querySelector("#nom").value;
    console.log(nom);
});

// ❌ PROBLÈME : La page se recharge immĂ©diatement !
// On ne voit mĂȘme pas le console.log !
Ce qui se passe :
1. Utilisateur clique sur "Envoyer"
2. L'événement "submit" se déclenche
3. Ton code s'exécute (console.log)
4. ❌ Le navigateur envoie le formulaire (comportement par dĂ©faut)
5. ❌ La page se recharge → tout le code JS est perdu !

La solution avec preventDefault

form.addEventListener("submit", (event) => {
    event.preventDefault();  // ← EmpĂȘche le rechargement !
    
    const nom = document.querySelector("#nom").value;
    console.log(nom);
    
    // Maintenant on peut traiter les données en JavaScript
    // Sans que la page se recharge !
});

✅ Maintenant : Le formulaire ne se soumet pas, la page ne recharge pas, et tu peux gĂ©rer tout en JavaScript !

ÉvĂ©nements de souris đŸ–±ïž

ÉvĂ©nement Se dĂ©clenche quand...
click Clic simple
dblclick Double-clic
mousedown Bouton de souris enfoncé
mouseup Bouton de souris relùché
mouseover Souris entre dans l'élément
mouseout Souris sort de l'élément
mousemove Souris bouge sur l'élément

Exemples

const box = document.querySelector(".box");

// Au survol
box.addEventListener("mouseover", () => {
    box.style.backgroundColor = "lightblue";
});

// Quand la souris sort
box.addEventListener("mouseout", () => {
    box.style.backgroundColor = "white";
});

// Double-clic
box.addEventListener("dblclick", () => {
    console.log("Double-cliqué !");
});

ÉvĂ©nements de clavier ⌚

ÉvĂ©nement Se dĂ©clenche quand...
keydown Touche enfoncée
keyup Touche relùchée
keypress Touche pressée (déprécié)

DĂ©tecter quelle touche

document.addEventListener("keydown", (event) => {
    console.log("Touche pressée :", event.key);
    
    // Détecter une touche spécifique
    if (event.key === "Enter") {
        console.log("Entrée pressée !");
    }
    
    if (event.key === "Escape") {
        console.log("Échap pressĂ©e !");
    }
    
    // Avec modificateurs
    if (event.ctrlKey && event.key === "s") {
        event.preventDefault();  // EmpĂȘche la sauvegarde du navigateur
        console.log("Ctrl+S détecté !");
    }
});

Sur un input

const input = document.querySelector("#search");

input.addEventListener("keydown", (event) => {
    console.log("CaractÚre tapé :", event.key);
    
    if (event.key === "Enter") {
        console.log("Recherche lancée !");
    }
});

ÉvĂ©nements de formulaire 📝

ÉvĂ©nement Se dĂ©clenche quand...
submit Formulaire soumis
change Valeur d'input changée (perd le focus)
input Valeur d'input modifiée (en temps réel)
focus ÉlĂ©ment reçoit le focus
blur ÉlĂ©ment perd le focus

HTML

<form id="monForm">
    <input type="text" id="nom" placeholder="Nom">
    <input type="email" id="email" placeholder="Email">
    <button type="submit">Envoyer</button>
</form>

JavaScript

const form = document.querySelector("#monForm");

form.addEventListener("submit", (event) => {
    event.preventDefault();  // EmpĂȘche le rechargement de la page
    
    const nom = document.querySelector("#nom").value;
    const email = document.querySelector("#email").value;
    
    console.log("Nom :", nom);
    console.log("Email :", email);
});

change vs input 🔄

change

Se déclenche quand la valeur change ET que l'input perd le focus

input.addEventListener("change", () => {
    console.log(input.value);
});

// Se déclenche : aprÚs avoir tapé
// ET quitté le champ

input

Se déclenche à CHAQUE modification (temps réel)

input.addEventListener("input", () => {
    console.log(input.value);
});

// Se déclenche : à chaque frappe
// En temps réel !

Exemple : Compteur de caractĂšres

const textarea = document.querySelector("textarea");
const compteur = document.querySelector("#compteur");

textarea.addEventListener("input", () => {
    const longueur = textarea.value.length;
    compteur.textContent = `${longueur} caractĂšres`;
});
# 📝 Partie 7

Travailler avec les Formulaires

Récupérer et valider les données

RĂ©cupĂ©rer les valeurs d'un formulaire đŸ“„

HTML

<form id="inscription">
    <input type="text" id="nom" name="nom">
    <input type="email" id="email" name="email">
    <input type="password" id="password" name="password">
    
    <input type="checkbox" id="newsletter" name="newsletter">
    
    <select id="pays" name="pays">
        <option value="fr">France</option>
        <option value="be">Belgique</option>
    </select>
    
    <button type="submit">S'inscrire</button>
</form>

JavaScript

const form = document.querySelector("#inscription");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    // Récupérer les valeurs
    const nom = document.querySelector("#nom").value;
    const email = document.querySelector("#email").value;
    const password = document.querySelector("#password").value;
    
    // Checkbox (true/false)
    const newsletter = document.querySelector("#newsletter").checked;
    
    // Select
    const pays = document.querySelector("#pays").value;
    
    console.log({nom, email, password, newsletter, pays});
});

FormData : RĂ©cupĂ©rer toutes les donnĂ©es 📩

FormData permet de récupérer facilement TOUTES les données d'un formulaire.

MĂ©thode 1 : Manuellement

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    const nom = document.querySelector("#nom").value;
    const email = document.querySelector("#email").value;
    // ... rĂ©pĂ©ter pour chaque champ 😰
});

MĂ©thode 2 : Avec FormData (plus simple)

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    // Créer un objet FormData
    const formData = new FormData(form);
    
    // Récupérer les valeurs
    const nom = formData.get("nom");
    const email = formData.get("email");
    const password = formData.get("password");
    
    // Ou convertir en objet
    const data = Object.fromEntries(formData);
    console.log(data);
    // {nom: "...", email: "...", password: "..."}
});

💡 Avantage : FormData rĂ©cupĂšre automatiquement tous les champs qui ont un attribut name !

Validation de formulaire ✅

const form = document.querySelector("#inscription");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    const nom = document.querySelector("#nom").value;
    const email = document.querySelector("#email").value;
    const password = document.querySelector("#password").value;
    
    // Validation
    let erreurs = [];
    
    if (nom.trim() === "") {
        erreurs.push("Le nom est obligatoire");
    }
    
    if (email.trim() === "") {
        erreurs.push("L'email est obligatoire");
    } else if (!email.includes("@")) {
        erreurs.push("L'email n'est pas valide");
    }
    
    if (password.length < 8) {
        erreurs.push("Le mot de passe doit faire au moins 8 caractĂšres");
    }
    
    // Afficher les erreurs
    if (erreurs.length > 0) {
        alert(erreurs.join("\n"));
    } else {
        console.log("Formulaire valide !");
        // Envoyer les données...
    }
});
# 💡 Partie 8

Exemples Pratiques Complets

Tout mettre en pratique

Exemple 1 : Liste de tñches (Todo List) ✅

HTML

<div>
    <input type="text" id="nouvelle-tache" placeholder="Nouvelle tĂąche">
    <button id="ajouter-btn">Ajouter</button>
</div>
<ul id="liste-taches"></ul>

JavaScript

const input = document.querySelector("#nouvelle-tache");
const bouton = document.querySelector("#ajouter-btn");
const liste = document.querySelector("#liste-taches");

function ajouterTache() {
    const texte = input.value.trim();
    
    if (texte === "") {
        alert("Entrez une tĂąche !");
        return;
    }
    
    // Créer le li
    const li = document.createElement("li");
    li.textContent = texte;
    
    // Créer le bouton supprimer
    const btnSuppr = document.createElement("button");
    btnSuppr.textContent = "❌";
    btnSuppr.style.marginLeft = "10px";
    
    // ÉvĂ©nement supprimer
    btnSuppr.addEventListener("click", () => {
        li.remove();
    });
    
    // ÉvĂ©nement marquer comme fait
    li.addEventListener("click", () => {
        li.style.textDecoration = "line-through";
        li.style.opacity = "0.5";
    });
    
    // Assembler
    li.appendChild(btnSuppr);
    liste.appendChild(li);
    
    // Vider l'input
    input.value = "";
}

// ÉvĂ©nements
bouton.addEventListener("click", ajouterTache);
input.addEventListener("keydown", (e) => {
    if (e.key === "Enter") ajouterTache();
});

Exemple 2 : Modal (popup) đŸȘŸ

HTML

<button id="ouvrir-modal">Ouvrir</button>

<div id="modal" style="display: none;">
    <div class="modal-content">
        <span id="fermer-modal">×</span>
        <h2>Titre de la modal</h2>
        <p>Contenu de la modal</p>
    </div>
</div>

JavaScript

const modal = document.querySelector("#modal");
const btnOuvrir = document.querySelector("#ouvrir-modal");
const btnFermer = document.querySelector("#fermer-modal");

// Ouvrir la modal
btnOuvrir.addEventListener("click", () => {
    modal.style.display = "block";
});

// Fermer avec le X
btnFermer.addEventListener("click", () => {
    modal.style.display = "none";
});

// Fermer en cliquant à l'extérieur
modal.addEventListener("click", (event) => {
    if (event.target === modal) {
        modal.style.display = "none";
    }
});

// Fermer avec Échap
document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && modal.style.display === "block") {
        modal.style.display = "none";
    }
});

Exemple 3 : Compteur interactif 🔱

HTML

<div>
    <button id="moins">-</button>
    <span id="compteur">0</span>
    <button id="plus">+</button>
    <button id="reset">Reset</button>
</div>

JavaScript

const compteurElement = document.querySelector("#compteur");
const btnMoins = document.querySelector("#moins");
const btnPlus = document.querySelector("#plus");
const btnReset = document.querySelector("#reset");

let compteur = 0;

function mettreAJour() {
    compteurElement.textContent = compteur;
    
    // Changer la couleur selon la valeur
    if (compteur > 0) {
        compteurElement.style.color = "green";
    } else if (compteur < 0) {
        compteurElement.style.color = "red";
    } else {
        compteurElement.style.color = "black";
    }
}

btnPlus.addEventListener("click", () => {
    compteur++;
    mettreAJour();
});

btnMoins.addEventListener("click", () => {
    compteur--;
    mettreAJour();
});

btnReset.addEventListener("click", () => {
    compteur = 0;
    mettreAJour();
});
# 🎓 RĂ©capitulatif

Ce qu'on a appris

RĂ©sumĂ© complet 📚

Action MĂ©thode Exemple
SĂ©lectionner querySelector document.querySelector("#id")
SĂ©lectionner tous querySelectorAll document.querySelectorAll(".class")
Modifier texte textContent element.textContent = "texte"
Modifier HTML innerHTML element.innerHTML = "<p>...</p>"
Modifier style style element.style.color = "red"
Ajouter classe classList.add element.classList.add("classe")
Créer élément createElement document.createElement("div")
Ajouter élément append parent.append(enfant)
Supprimer élément remove element.remove()
Écouter Ă©vĂ©nement addEventListener element.addEventListener("click", fn)

Bonnes pratiques DOM 💡

  1. Utilise querySelector/querySelectorAll
    Plus modernes et flexibles que les anciennes méthodes
  2. PréfÚre classList à style
    SĂ©pare le style du JavaScript (plus maintenable)
  3. Cache les sélections dans des variables
    Évite de rechercher le mĂȘme Ă©lĂ©ment plusieurs fois
  4. Utilise addEventListener, pas onclick
    Permet plusieurs listeners sur le mĂȘme Ă©lĂ©ment
  5. Pense Ă  event.preventDefault()
    Pour les formulaires et les liens
  6. Valide les formulaires cÎté client ET serveur
    La validation client est pour l'UX, pas la sécurité

🎓 Fin du cours

Le DOM JavaScript

Vous maĂźtrisez maintenant :

🔍 SĂ©lectionner des Ă©lĂ©ments (querySelector)

✏ Modifier le contenu (textContent, innerHTML)

🎹 Modifier les styles (style, classList)

đŸ—ïž CrĂ©er et supprimer des Ă©lĂ©ments

đŸ–±ïž GĂ©rer les Ă©vĂ©nements (addEventListener)

📝 Travailler avec les formulaires