Manipulation du DOM en JavaScript
C’est quoi le DOM en JavaScript ?
DOM = Document Object Model
➡️ C’est une représentation en mémoire de la structure HTML d’une page web, sous forme d’arbre.
Grâce au DOM, JavaScript peut accéder, modifier ou supprimer n’importe quel élément HTML dynamiquement.
Structure DOM
Exemple HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Ma page</title>
5 </head>
6 <body>
7 <h1 id="titre">Bonjour Yasine</h1>
8 <p class="text">Ceci est un paragraphe.</p>
9 <button onclick="changerTitre()">Changer le titre</button>
10 </body>
11 </html>
➡️ Cette structure HTML est représentée dans le navigateur sous forme d’un arbre DOM.
Vue simplifiée en arbre :
1 document
2 ├── html
3 │ ├── head
4 │ │ └── title
5 │ └── body
6 │ ├── h1#titre
7 │ ├── p.text
8 │ └── button
Manipuler le DOM avec JavaScript
✅ 1. Accéder à un élément
🎯 Objectif
Avant de modifier un élément HTML (texte, style, ajout…), on doit d’abord le sélectionner.
JavaScript nous donne plusieurs méthodes pour accéder aux éléments du DOM.
📌 Méthodes principales pour accéder à un élément
Méthode Description Exemple
getElementById() Sélectionne un élément par son document.getElementById("mon
ID Id")
getElementsByClassName() Sélectionne tous les éléments document.getElementsByClassN
avec une classe ame("maClasse")
getElementsByTagName() Sélectionne tous les éléments document.getElementsByTagNam
avec une balise HTML e("p")
querySelector() Sélectionne le premier élément document.querySelector(".maC
qui correspond à un sélecteur lasse")
CSS
querySelectorAll() Sélectionne tous les éléments document.querySelectorAll("d
qui correspondent à un sélecteur iv.rouge")
CSS
A. getElementById()
Utilisation : quand tu veux accéder à un élément unique avec un id .
Exemple HTML
1 <h1 id="titre">Bonjour</h1>
JavaScript
1 let titre = document.getElementById("titre");
2 console.log(titre.textContent); // Affiche : Bonjour
B. getElementsByClassName()
Utilisation : retourne une liste (HTMLCollection) d’éléments avec la même classe.
Exemple HTML
1 <p class="info">Texte 1</p>
2 <p class="info">Texte 2</p>
JavaScript
1 let elements = document.getElementsByClassName("info");
2 console.log(elements[0].textContent); // "Texte 1"
3 console.log(elements.length); // 2
C. getElementsByTagName()
Utilisation : sélectionne tous les éléments d’un même type (balise).
1 <div>Premier</div>
2 <div>Deuxième</div>
1 let divs = document.getElementsByTagName("div");
2 console.log(divs[1].textContent); // "Deuxième"
D. querySelector()
Utilisation : plus moderne, on peut utiliser des sélecteurs CSS ( #id , .class , tag )
⚠️ Retourne le premier élément trouvé !
1 <p class="important">Paragraphe 1</p>
2 <p class="important">Paragraphe 2</p>
1 let p = document.querySelector(".important");
2 console.log(p.textContent); // "Paragraphe 1"
E. querySelectorAll()
Utilisation : même principe que le précédent, mais il retourne tous les éléments.
1 let tous = document.querySelectorAll(".important");
2 tous.forEach(p => console.log(p.textContent));
Récap visuel
1 <div id="box" class="bloc">Hello</div>
1 document.getElementById("box"); // Sélection par id
2 document.getElementsByClassName("bloc"); // Par classe
3 document.getElementsByTagName("div"); // Par balise
4 document.querySelector("#box"); // Par CSS
5 document.querySelectorAll(".bloc"); // Tous les .bloc
✅ 2. Modifier le contenu d’un élément HTML
🎯 Objectif :
Changer ce qu’il y a à l’intérieur d’un élément HTML (texte ou HTML) avec JavaScript.
📌 Les propriétés à connaître :
Propriété Description
textContent Change uniquement le texte
innerHTML Change le HTML (balises incluses)
innerText (optionnelle) Semblable à textContent , mais dépend plus du
rendu visuel (rarement utilisée)
A. textContent
Change ou récupère le texte brut (sans HTML)
🔹 Exemple HTML :
1 <p id="paragraphe">Bonjour Yasine !</p>
🔹 JavaScript :
1 let p = document.getElementById("paragraphe");
2 p.textContent = "Contenu modifié."; // ✅ change le texte
B. innerHTML
Permet d’ajouter ou de modifier du HTML à l’intérieur d’un élément (ex : balises <strong> , <em> )
🔹 Exemple HTML :
1 <p id="paragraphe">Bonjour</p>
🔹 JavaScript :
1 let p = document.getElementById("paragraphe");
2 p.innerHTML = "<strong>Texte en gras</strong>"; // ✅ change le contenu + ajoute balise
Différence entre textContent et innerHTML
1 element.textContent = "<b>Hello</b>";
2 // Affiche littéralement : <b>Hello</b>
3
4 element.innerHTML = "<b>Hello</b>";
5 // Affiche : Hello en gras (interprète le HTML)
Exemple complet
1 <h1 id="titre">Titre original</h1>
2 <button onclick="changerTexte()">Changer le texte</button>
3
4 <script>
5 function changerTexte() {
6 let titre = document.getElementById("titre");
7 titre.textContent = "Nouveau Titre 👋";
8 }
9 </script>
Résumé
Propriété Change le texte brut Interprète le HTML
textContent ✅ ❌
innerHTML ✅ ✅
✅ 3. Modifier le style d’un élément HTML
🎯 Objectif :
Changer l'apparence (couleur, taille, bordure, etc.) d’un élément HTML avec JavaScript.
📌 Méthodes pour modifier le style
A. Modifier directement avec .style
Tu peux accéder à la propriété style d’un élément, puis définir des propriétés CSS.
✅ Syntaxe :
1 element.style.nomDeLaPropriétéCSS = "valeur";
🔸 Exemple :
1 <p id="texte">Texte stylé !</p>
1 let p = document.getElementById("texte");
2 p.style.color = "red"; // couleur du texte
3 p.style.fontSize = "24px"; // taille de police
4 p.style.backgroundColor = "yellow"; // fond jaune
⚠️ Remarques :
Les noms des propriétés CSS sont en camelCase en JavaScript.
Exemple : background-color devient backgroundColor
font-size → fontSize
B. Ajouter / enlever une classe CSS
C’est plus propre et plus flexible !
✅ Syntaxe :
1 element.classList.add("maClasse"); // Ajoute une classe
2 element.classList.remove("maClasse"); // Retire une classe
3 element.classList.toggle("maClasse"); // Ajoute si absente, retire si présente
🔸 Exemple 1 ( classList.add() ) :
➕ Ajoute une ou plusieurs classes à un élément.
1 <style>
2 .rouge {
3 color: red;
4 font-weight: bold;
5 }
6 </style>
7
8 <p id="paragraphe1">Texte 1</p>
9 <button onclick="ajouterClasse()">Ajouter classe</button>
1 function ajouterClasse() {
2 let p = document.getElementById("paragraphe1");
3 p.classList.add("rouge");
4 }
📌 Résultat : Le texte devient rouge et gras.
🔸 Exemple 2 ( classList.remove() ) :
❌ Supprime une classe si elle existe.
1 <style>
2 .bleu {
3 color: blue;
4 }
5 </style>
6
7 <p id="paragraphe2" class="bleu">Texte 2</p>
8 <button onclick="supprimerClasse()">Supprimer classe</button>
1 function supprimerClasse() {
2 let p = document.getElementById("paragraphe2");
3 p.classList.remove("bleu");
4 }
📌 Résultat : Le texte redevient noir (style par défaut).
🔸 Exemple 3 ( classList.toggle() ) :
🔁 Ajoute la classe si elle est absente, la retire si elle est présente
1 <style>
2 .surbrillance {
3 background-color: yellow;
4 }
5 </style>
6
7 <p id="paragraphe3">Texte 3</p>
8 <button onclick="basculerClasse()">Activer/Désactiver surbrillance</button>
1 function basculerClasse() {
2 let p = document.getElementById("paragraphe3");
3 p.classList.toggle("surbrillance");
4 }
📌 Résultat :
Premier clic → ajoute fond jaune
Deuxième clic → enlève le fond jaune
Et ainsi de suite...
