Manipulation du DOM en JavaScript : Guide Pratique pour Débutants

Si tu as déjà voulu rendre une page web interactive — afficher un message au clic d'un bouton, ajouter un élément à une liste, changer la couleur d'un texte — alors tu as besoin du DOM. C'est l'outil fondamental qui permet à JavaScript de dialoguer avec le HTML de ta page. Dans cet article, on va explorer la manipulation du DOM en JavaScript de A à Z, avec des exemples concrets et pratiques.

Le DOM, c'est quoi exactement ?

Le DOM (Document Object Model) est une représentation en arbre de ta page HTML, construite par le navigateur au moment du chargement. Chaque balise HTML devient un nœud (node) dans cet arbre : la balise <html> est la racine, <body> est son enfant, et ainsi de suite.

// Structure HTML
// <body>
//   <h1>Bonjour</h1>
//   <p id="intro">Bienvenue sur GoGoKodo</p>
// </body>

// JavaScript peut accéder à chaque nœud
console.log(document.body); // <body>...</body>

JavaScript accède à cet arbre via l'objet global document. C'est ton point d'entrée pour tout ce que tu vas faire : lire, modifier, créer ou supprimer des éléments. Pour aller plus loin sur les fondamentaux, consulte la documentation MDN sur le DOM.

Sélectionner des éléments du DOM

Avant de modifier quoi que ce soit, tu dois d'abord cibler l'élément voulu. JavaScript te donne plusieurs méthodes pour ça.

querySelector et querySelectorAll

Ce sont les méthodes les plus modernes et les plus utilisées. Elles fonctionnent exactement comme les sélecteurs CSS :

// Sélectionner le premier élément correspondant
const titre = document.querySelector("h2");
const bouton = document.querySelector(".btn-principal");
const form = document.querySelector("#formulaire");

// Sélectionner TOUS les éléments correspondants (retourne une NodeList)
const tousLesParagraphes = document.querySelectorAll("p");
const tousLesItems = document.querySelectorAll(".item");

// Itérer sur la NodeList
tousLesItems.forEach(item => {
  console.log(item.textContent);
});

Retrouve la documentation complète de querySelector sur MDN.

getElementById

Méthode classique, très rapide, pour cibler un élément par son id unique :

const monElement = document.getElementById("mon-id");
// Pas de # ici — contrairement à querySelector("#mon-id")

Avant de continuer, assure-toi de bien maîtriser les variables JavaScript — elles sont au cœur de tout ce qu'on va faire ici.

Lire et modifier le contenu

Une fois l'élément sélectionné, tu peux lire ou modifier son contenu via trois propriétés essentielles.

const para = document.querySelector("#intro");

// textContent : texte brut, sans balises HTML
console.log(para.textContent); // "Bienvenue sur GoGoKodo"
para.textContent = "Nouveau texte sans HTML";

// innerHTML : contenu avec balises HTML
para.innerHTML = "<strong>Texte en gras</strong> et normal";

// innerText : texte visible (tient compte du CSS)
console.log(para.innerText);

Attention : innerHTML est puissant mais dangereux si tu injectes du contenu venant d'un utilisateur sans le sanitiser — risque de failles XSS. Préfère textContent pour du texte simple.

Modifier les styles et classes CSS

JavaScript te permet de styler tes éléments de deux façons : directement via style, ou plus proprement via classList.

La propriété style

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

// Les propriétés CSS s'écrivent en camelCase
boite.style.backgroundColor = "#3498db";
boite.style.fontSize = "18px";
boite.style.display = "none"; // Cacher un élément

classList : la méthode recommandée

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

carte.classList.add("active");       // Ajouter une classe
carte.classList.remove("hidden");    // Supprimer une classe
carte.classList.toggle("selected");  // Ajouter si absente, supprimer si présente
carte.classList.contains("active");  // Vérifier → true ou false

// Pratique pour des effets au clic :
const btn = document.querySelector("#menu-btn");
btn.addEventListener("click", () => {
  document.querySelector("#menu").classList.toggle("ouvert");
});

L'approche classList est préférable car elle sépare bien le CSS du JavaScript. Tu modifies uniquement les classes, et c'est ton CSS qui gère l'apparence.

Créer et supprimer des éléments

C'est là que le DOM devient vraiment puissant : tu peux générer du HTML dynamiquement, sans recharger la page.

// Créer un élément
const nouvelItem = document.createElement("li");
nouvelItem.textContent = "Nouvelle tâche";
nouvelItem.classList.add("tache");

// L'ajouter dans le DOM
const liste = document.querySelector("#ma-liste");
liste.appendChild(nouvelItem);  // Ajouter à la fin

// Insérer avant un élément précis
const reference = liste.querySelector(".item-existant");
liste.insertBefore(nouvelItem, reference);

// Supprimer un élément
const aSupprimer = document.querySelector(".obsolete");
aSupprimer.remove(); // Méthode moderne

Naviguer dans l'arbre DOM

Tu peux te déplacer dans l'arbre DOM depuis n'importe quel nœud, en remontant, descendant ou allant vers les voisins.

const item = document.querySelector(".item-actif");

// Remonter vers le parent
const parent = item.parentElement;

// Accéder aux enfants
const enfants = parent.children;           // HTMLCollection de tous les enfants
const premierEnfant = parent.firstElementChild;
const dernierEnfant = parent.lastElementChild;

// Naviguer entre frères et sœurs
const suivant = item.nextElementSibling;
const precedent = item.previousElementSibling;

// Exemple : supprimer l'élément suivant
if (item.nextElementSibling) {
  item.nextElementSibling.remove();
}

Les événements DOM avec addEventListener

Les événements, c'est ce qui rend une page interactive. Un événement se déclenche quand l'utilisateur fait quelque chose : clic, frappe au clavier, soumission de formulaire…

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

// Écouter un clic
btn.addEventListener("click", function(event) {
  console.log("Cliqué !", event.target);
  event.target.textContent = "Cliqué !";
});

// Écouter la saisie dans un input
const input = document.querySelector("#recherche");
input.addEventListener("input", (e) => {
  console.log("Valeur actuelle :", e.target.value);
});

// Écouter la soumission d'un formulaire
const form = document.querySelector("#mon-form");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // Empêcher le rechargement de la page
  const valeur = document.querySelector("#champ").value;
  console.log("Formulaire soumis avec :", valeur);
});

Conseil : utilise toujours addEventListener plutôt que les attributs HTML inline comme onclick="..." — c'est plus propre, plus maintenable, et tu peux attacher plusieurs écouteurs au même élément.

Mini-projet : une todo list interactive

Mettons tout ça ensemble avec un exemple concret : une liste de tâches en JavaScript pur.

// HTML :
// <input id="input-tache" placeholder="Nouvelle tâche..." />
// <button id="btn-ajouter">Ajouter</button>
// <ul id="liste-taches"></ul>

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

function ajouterTache() {
  const texte = input.value.trim();
  if (!texte) return;

  const li = document.createElement("li");
  li.textContent = texte;

  const btnSuppr = document.createElement("button");
  btnSuppr.textContent = "✕";
  btnSuppr.addEventListener("click", () => li.remove());

  li.appendChild(btnSuppr);
  liste.appendChild(li);

  input.value = "";
  input.focus();
}

btnAjouter.addEventListener("click", ajouterTache);
input.addEventListener("keydown", (e) => {
  if (e.key === "Enter") ajouterTache();
});

En moins de 30 lignes, tu as une application fonctionnelle qui utilise la sélection, la création d'éléments, les événements et la suppression. C'est la puissance du DOM bien maîtrisé.

Pour pratiquer dans un environnement guidé, essaie l'atelier DOM interactif sur GoGoKodo — des exercices progressifs directement dans le navigateur.

Erreurs courantes avec le DOM

Même les développeurs expérimentés tombent dans ces pièges :

Script exécuté avant le DOM chargé : si ton script est dans <head> sans defer, le DOM n'est pas encore construit. Solution : place ton script juste avant </body> ou ajoute l'attribut defer.
querySelector retourne null : si aucun élément ne correspond, tu obtiens null — appeler une méthode dessus provoque une erreur. Vérifie toujours avant d'agir.
Confondre children et childNodes : children retourne seulement les éléments HTML, childNodes inclut aussi les nœuds texte. Préfère children.
Utiliser innerHTML avec du contenu utilisateur : risque de faille XSS. Toujours utiliser textContent ou sanitiser le contenu avant injection.

Consulte notre guide sur les erreurs JavaScript courantes pour éviter les pièges les plus classiques quand tu débutes.

Et après le DOM : direction React

Maintenant que tu maîtrises la manipulation du DOM en JavaScript, tu comprends exactement pourquoi des bibliothèques comme React ont été créées. À grande échelle, manipuler le DOM manuellement devient fastidieux : il faut synchroniser manuellement l'état de l'application avec ce qui est affiché à l'écran.

React introduit le concept de DOM virtuel : au lieu de modifier le vrai DOM directement, React maintient une copie légère en mémoire, calcule les différences, et n'applique que les changements nécessaires — plus performant et bien plus maintenable.

Si tu veux franchir le pas, notre guide pour débuter avec React en 2026 reprend exactement là où cet article s'arrête. Tu verras comment les concepts du DOM natif — sélection, modification, événements — se traduisent dans le modèle React avec les composants et les hooks.

La manipulation du DOM reste une compétence fondamentale : même si tu utilises React ou Vue au quotidien, comprendre ce qui se passe sous le capot te rendra meilleur développeur. Pratique sur de petits projets interactifs et retrouve tous nos ateliers pratiques pour progresser méthodiquement.