Manipulation du DOM

La manipulation du DOM permet de modifier la page HTML avec JavaScript.

JavaScript peut :

• Créer des éléments
• Ajouter du contenu
• Supprimer des éléments
• Modifier des classes CSS
• Changer la structure de la page

C’est une des bases du développement front-end moderne.

1. createElement()

La méthode createElement() permet de créer un nouvel élément HTML.

const paragraph = document.createElement("p");

Ici, JavaScript crée un élément <p> en mémoire.

Important : l’élément n’apparaît pas encore dans la page.

2. textContent

La propriété textContent permet de modifier le texte d’un élément.

const paragraph = document.createElement("p");

paragraph.textContent = "Bonjour Fred";

textContent ajoute du texte brut.

3. append()

La méthode append() ajoute un élément à la fin d’un parent.

document.body.append(paragraph);

Ici, le paragraphe est ajouté à la fin du body.

4. prepend()

La méthode prepend() ajoute un élément au début d’un parent.

const title = document.createElement("h2");

title.textContent = "Titre";

document.body.prepend(title);

Ici, le titre est ajouté au début du body.

5. remove()

La méthode remove() supprime un élément du DOM.

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

message.remove();

Après l’exécution, l’élément disparaît de la page.

6. innerHTML

La propriété innerHTML permet d’ajouter du HTML dans un élément.

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

container.innerHTML = "<strong>Bonjour</strong>";

Contrairement à textContent, innerHTML interprète les balises HTML.

7. classList

La propriété classList permet de manipuler les classes CSS.

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

box.classList.add("active");

Ici, JavaScript ajoute la classe active.

8. add()

La méthode add() ajoute une classe CSS.

box.classList.add("visible");

9. remove()

La méthode remove() retire une classe CSS.

box.classList.remove("hidden");

10. toggle()

La méthode toggle() ajoute ou retire une classe automatiquement.

box.classList.toggle("open");

Si la classe existe : elle est retirée.

Sinon : elle est ajoutée.

11. replaceChildren()

La méthode replaceChildren() remplace tous les enfants d’un élément.

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

const title = document.createElement("h2");

title.textContent = "Nouveau contenu";

container.replaceChildren(title);

Les anciens éléments sont supprimés, puis remplacés.

12. Manipuler les styles

JavaScript peut modifier le CSS d’un élément.

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

box.style.backgroundColor = "purple";

box.style.color = "white";

En JavaScript, les propriétés CSS utilisent le camelCase.

13. createElement() + append()

Ces deux méthodes sont souvent utilisées ensemble.

const button = document.createElement("button");

button.textContent = "Connexion";

document.body.append(button);

Ici :

• JavaScript crée un bouton
• Ajoute du texte
• Insère le bouton dans la page

14. Manipulation dynamique

Grâce au DOM, la page peut changer après son chargement.

Cela permet de créer :

• Des menus dynamiques
• Des modales
• Des listes interactives
• Des notifications
• Des interfaces modernes

15. Bonnes pratiques

• Préférer textContent pour le texte
• Utiliser classList pour le style
• Éviter document.write()
• Créer des éléments avec createElement()
• Limiter innerHTML lorsque possible

Résumé rapide