Manipuler le DOM en JavaScript

Sélectionner, modifier, créer et supprimer des éléments HTML avec JavaScript

9
Sections
25+
Exemples
Vanilla JS
Pas de framework
📚 Navigation

🏠 Hub Programmation
⚡ Cours JavaScript
🎯 addEventListener
🌐 Fetch API

📋 Sommaire
1. C'est quoi le DOM ?
6. Créer et insérer des éléments
2. Sélectionner des éléments
7. Supprimer des éléments
3. Modifier le contenu
8. Traverser le DOM
4. Modifier les styles
9. Questions fréquentes
5. Manipuler les classes

SECTION 01

C'est quoi le DOM ?

🌳 Document Object Model

Le DOM est la représentation en arbre de ta page HTML. Chaque balise HTML devient un nœud (node) que JavaScript peut lire et modifier. Quand tu changes le DOM, le navigateur met à jour l'affichage en temps réel.




id=« title »>Bonjour


class=« text »>Un paragraphe



// Le DOM transforme ça en arbre :
// document
// └── html
// └── body
// ├── h1#title → « Bonjour »
// └── p.text → « Un paragraphe »

document est le point d'entrée : c'est l'objet qui représente toute la page. Toutes les manipulations du DOM commencent par document.

SECTION 02

Sélectionner des éléments

🔍 Les sélecteurs modernes
// querySelector — retourne le PREMIER élément qui matche
const title = document.querySelector(« #title »); // par id
const text = document.querySelector(« .text »); // par class
const link = document.querySelector(« a[href='#'] »); // par attribut
const item = document.querySelector(« nav > ul > li »); // sélecteur CSS

// querySelectorAll — retourne TOUS les éléments (NodeList)
const paragraphs = document.querySelectorAll(« p »);
const cards = document.querySelectorAll(« .card »);

// Itérer sur les résultats
cards.forEach(card => );

📊 Comparaison des méthodes
MéthodeRetourneUsage recommandé
querySelector(css)1 élément ou null✅ Toujours — le plus flexible
querySelectorAll(css)NodeList (statique)✅ Toujours — le plus flexible
getElementById(id)1 élément ou nullOK — légèrement plus rapide
getElementsByClassName(c)HTMLCollection (live)⚠️ Éviter — collection live
getElementsByTagName(t)HTMLCollection (live)⚠️ Éviter — collection live

En 2026, utilise querySelector et querySelectorAll pour tout. Ils acceptent n'importe quel sélecteur CSS et retournent des collections statiques (plus prévisibles).

SECTION 03

Modifier le contenu

const el = document.querySelector(« #title »);

// textContent — texte brut (sécurisé, rapide)
el.textContent = « Nouveau titre »;
console.log(el.textContent); // « Nouveau titre »

// innerHTML — HTML complet (⚠️ attention aux failles XSS)
el.innerHTML = « Titre en gras »;

// Attributs
const link = document.querySelector(« a »);
link.getAttribute(« href »); // lire
link.setAttribute(« href », « https://example.com »); // écrire
link.removeAttribute(« target »); // supprimer
link.hasAttribute(« rel »); // vérifier

// Raccourcis pour les attributs courants
link.href = « https://example.com »;
link.id = « main-link »;

// Data attributes
//


const div = document.querySelector(« [data-user-id] »);
div.dataset.userId; // « 42 » (camelCase automatique)
div.dataset.role; // « admin »
div.dataset.active = « true »; // ajouter data-active= »true »

⚠️ innerHTML exécute le HTML injecté. Ne jamais y mettre du contenu utilisateur directement — risque d'attaque XSS. Utilise textContent pour le texte pur.

SECTION 04

Modifier les styles

const el = document.querySelector(« .box »);

// style inline (propriétés en camelCase)
el.style.backgroundColor = « #2563eb »;
el.style.padding = « 16px »;
el.style.borderRadius = « 8px »;
el.style.display = « none »; // masquer
el.style.display = «  »; // revenir au CSS par défaut

// Modifier une variable CSS
document.documentElement.style.setProperty(« –primary », « #7c3aed »);

// Lire le style calculé (inclut le CSS)
const computed = getComputedStyle(el);
console.log(computed.width); // « 320px »

Évite de modifier les styles en JS quand tu peux le faire avec des classes CSS. el.style est utile pour les valeurs dynamiques (position, taille calculée). Pour le reste, toggle une classe.

SECTION 05

Manipuler les classes CSS

🎨 classList — la façon propre
const el = document.querySelector(« .card »);

el.classList.add(« active »); // ajouter une classe
el.classList.add(« dark », « rounded »); // plusieurs à la fois
el.classList.remove(« active »); // supprimer
el.classList.toggle(« visible »); // ajouter si absente, supprimer si présente
el.classList.contains(« active »); // vérifier → true/false
el.classList.replace(« old », « new »); // remplacer

// Toggle conditionnel
el.classList.toggle(« dark », isDarkMode); // ajoute si true, retire si false

// Pattern courant : menu hamburger
const btn = document.querySelector(« .menu-btn »);
const nav = document.querySelector(« .nav »);
btn.addEventListener(« click », () => );

SECTION 06

Créer et insérer des éléments

🏗️ createElement + appendChild
// Créer un élément
const card = document.createElement(« div »);
card.className = « card »;
card.textContent = « Nouvelle carte »;

// L'insérer dans le DOM
document.querySelector(« .container »).appendChild(card);

// Insertion plus précise avec insertAdjacentHTML
const list = document.querySelector(« ul »);
list.insertAdjacentHTML(« beforeend », `

  • Nouvel item

    • `);
    list.insertAdjacentHTML(« afterbegin », `

  • Premier item

    • `);

    PositionInsère
    « beforebegin »Avant l'élément (frère précédent)
    « afterbegin »Premier enfant de l'élément
    « beforeend »Dernier enfant de l'élément
    « afterend »Après l'élément (frère suivant)
    ⚡ Générer une liste dynamique
    const users = [« Alice », « Bob », « Charlie »];
    const ul = document.querySelector(« #user-list »);

    // Méthode 1 : innerHTML (simple mais attention au XSS)
    ul.innerHTML = users.map(u => `

  • $

    • `).join(«  »);

    // Méthode 2 : fragment (performant pour beaucoup d'éléments)
    const fragment = document.createDocumentFragment();
    users.forEach(u => );
    ul.appendChild(fragment); // un seul reflow

    DocumentFragment insère tous les éléments en une seule opération DOM. Plus performant que d'ajouter les éléments un par un (un seul reflow au lieu de N).

    SECTION 07

    Supprimer des éléments

    const el = document.querySelector(« .card »);

    // Méthode moderne
    el.remove(); // supprime l'élément du DOM

    // Supprimer un enfant spécifique
    const parent = document.querySelector(« .container »);
    parent.removeChild(el);

    // Vider tous les enfants
    parent.innerHTML = «  »;
    // ou (plus propre) :
    parent.replaceChildren();

    // Remplacer un élément
    const newEl = document.createElement(« div »);
    newEl.textContent = « Remplacement »;
    el.replaceWith(newEl);

    SECTION 08

    Traverser le DOM

    🧭 Naviguer entre les nœuds
    const el = document.querySelector(« .item »);

    // Parent
    el.parentElement; // parent direct
    el.closest(« .container »); // ancêtre le plus proche qui matche

    // Enfants
    el.children; // HTMLCollection des enfants (éléments uniquement)
    el.firstElementChild; // premier enfant élément
    el.lastElementChild; // dernier enfant élément

    // Frères et sœurs (siblings)
    el.previousElementSibling; // frère précédent
    el.nextElementSibling; // frère suivant

    PropriétéDirectionRetourne
    parentElement↑ HautLe parent direct
    closest(css)↑ Haut (récursif)Premier ancêtre qui matche
    children↓ BasTous les enfants (éléments)
    firstElementChild↓ BasPremier enfant
    previousElementSibling← GaucheFrère précédent
    nextElementSibling→ DroiteFrère suivant

    closest() est extrêmement utile avec la délégation d'événements. Quand un clic arrive sur un enfant, e.target.closest(« .card ») retrouve la carte parente. Voir notre fiche addEventListener.

    SECTION 09

    Questions fréquentes

    Quelle différence entre textContent et innerHTML ?
    textContent retourne et définit le texte brut — il est sécurisé et rapide. innerHTML retourne et définit le HTML — il peut exécuter des balises et des scripts, ce qui crée un risque XSS si le contenu vient de l'utilisateur. Utilise textContent par défaut.
    querySelector vs getElementById — lequel utiliser ?
    querySelector est plus flexible (accepte tout sélecteur CSS) et plus cohérent avec querySelectorAll. getElementById est marginalement plus rapide, mais la différence est négligeable. En 2026, querySelector est la convention.
    A-t-on encore besoin de jQuery en 2026 ?
    Non. querySelector, classList, fetch, addEventListener et les API modernes couvrent tous les cas d'usage de jQuery. Le vanilla JavaScript moderne est aussi concis que jQuery l'était, sans dépendance supplémentaire.
    C'est quoi la différence entre une NodeList et une HTMLCollection ?
    Une NodeList (retournée par querySelectorAll) est statique — elle ne change pas si le DOM change. Elle supporte forEach. Une HTMLCollection (retournée par getElementsByClassName) est live — elle se met à jour automatiquement, ce qui peut causer des bugs en boucle.

    📚 Fiches JavaScript liées

    🎯 addEventListener
    🔤 let, const, var
    🌐 Fetch API
    📄 JSON
    🔁 Boucles
    ⚡ Cours JavaScript complet
    🏠 Hub Programmation

    Manipuler le DOM en JavaScript — Guide complet

    Référence : MDN DOM