Lesson 5/9 8 min

The DOM

Manipulate the web page with JavaScript: select elements, change content, add and remove nodes.

FR EN

Qu'est-ce que le DOM ?

Le DOM (Document Object Model) est la représentation de votre page HTML sous forme d'un arbre d'objets. Chaque balise HTML devient un objet JavaScript que vous pouvez manipuler.

Imaginez un immeuble avec un plan interactif. Le DOM, c'est ce plan : il représente chaque pièce (balise) et vous permet de les modifier en direct : changer la peinture, ajouter un meuble, supprimer un mur.

document
  → html
    → head
    → body
      → h1
      → p
      → div
        → p
Le DOM sous forme d'arbre de nœuds : document contient html, qui contient head et body ; head contient title, body contient h1 et p. document nœud racine html head body title h1 p les nœuds parents (en vert) contiennent leurs nœuds enfants
Chaque balise est un nœud ; un nœud contient les nœuds imbriqués à l'intérieur.

Sélectionner des éléments

Deux méthodes essentielles :

// Sélectionner UN élément (le premier trouvé)
const titre = document.querySelector("h1");
const card = document.querySelector(".card");
const main = document.querySelector("#main");

// Sélectionner TOUS les éléments
const paragraphes = document.querySelectorAll("p");
// paragraphes est une NodeList (comme un tableau)

Les sélecteurs sont les mêmes qu'en CSS : h1, .classe, #id, div > p, etc.

Modifier le contenu et le style

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

// Contenu texte
el.textContent = "Nouveau titre";

// Contenu HTML
el.innerHTML = "Titre <em>important</em>";

// Style
el.style.color = "blue";
el.style.fontSize = "24px";

// Classes CSS
el.classList.add("actif");
el.classList.remove("masque");
el.classList.toggle("visible"); // ajoute ou retire

Bonne pratique : préférez classList à style pour le design. Définissez vos styles dans le CSS et basculez les classes en JavaScript.

Créer et supprimer des éléments

// Créer un élément
const nouvelElement = document.createElement("p");
nouvelElement.textContent = "Paragraphe ajouté !";

// L'ajouter au DOM
document.querySelector("#container").appendChild(nouvelElement);

// Supprimer un élément
nouvelElement.remove();

C'est comme ajouter un meuble dans une pièce de votre bâtiment, ou en retirer un. La page se met à jour instantanément.

What is the DOM?

The DOM (Document Object Model) is the representation of your HTML page as a tree of objects. Every HTML tag becomes a JavaScript object you can manipulate.

Think of a building with an interactive floor plan. The DOM is that plan — it represents every room (tag) and lets you modify them live: change the paint, add furniture, remove a wall.

document
  → html
    → head
    → body
      → h1
      → p
      → div
        → p
The DOM as a tree of nodes: document contains html, which contains head and body; head holds title, body holds h1 and p. document root node html head body title h1 p parent nodes (green) contain their child nodes
Each tag is a node; a node contains the nodes nested inside it.

Selecting elements

Two essential methods:

// Select ONE element (the first found)
const title = document.querySelector("h1");
const card = document.querySelector(".card");
const main = document.querySelector("#main");

// Select ALL elements
const paragraphs = document.querySelectorAll("p");
// paragraphs is a NodeList (like an array)

Selectors are the same as CSS: h1, .class, #id, div > p, etc.

Modifying content and style

const el = document.querySelector("#title");

// Text content
el.textContent = "New title";

// HTML content
el.innerHTML = "Title <em>important</em>";

// Style
el.style.color = "blue";
el.style.fontSize = "24px";

// CSS classes
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("visible"); // add or remove

Best practice: prefer classList over style for design. Define your styles in CSS and toggle classes with JavaScript.

Creating and removing elements

// Create an element
const newElement = document.createElement("p");
newElement.textContent = "Added paragraph!";

// Add it to the DOM
document.querySelector("#container").appendChild(newElement);

// Remove an element
newElement.remove();

It's like adding furniture to a room in your building, or removing some. The page updates instantly.

Essayez vous-même
Avec l'IA

Copiez ce prompt dans Claude ou ChatGPT :

Génère un script JavaScript qui crée une liste de 5 éléments HTML dynamiquement, avec un style différent pour les éléments pairs et impairs. Explique chaque étape.
Ré-explique sans regarder

Sans relire la réponse de l'IA : quelles sont les deux étapes pour ajouter un nouvel élément à la page, et pourquoi createElement seul ne suffit pas ?

Une bonne explication dit : (1) document.createElement("p") fabrique l'élément en mémoire, mais il n'est encore rattaché à rien : il n'apparaît pas dans la page. (2) parent.appendChild(el) l'insère réellement dans l'arbre du DOM, à un endroit visible. Tant qu'on n'a pas fait l'étape 2, l'élément existe côté JavaScript mais reste invisible.
Exercice : Corrigez le code de l'IA

L'IA a utilisé getElementById avec un # dans l'id. Retirez le # pour que le sélecteur fonctionne.

Corrigez le code
Accepter ou rejeter le code de l'IA

L'IA propose ce code pour afficher une liste de pseudos dans la page. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.

const liste = document.querySelector("#liste");
const pseudos = ["Alice", "Bob", "Charlie"];

pseudos.forEach(function(pseudo) {
  liste.innerHTML += "<li>" + pseudo + "</li>";
});
À rejeter. Deux problèmes : (1) innerHTML += dans une boucle force le navigateur à reparser tout le HTML existant à chaque tour, et détruit puis recrée les nœuds déjà présents (gourmand, et tout écouteur d'événement attaché est perdu). (2) Concaténer une valeur directement dans innerHTML est une porte ouverte aux injections si le pseudo venait d'un utilisateur. Le réflexe pro : createElement("li") + li.textContent = pseudo + liste.appendChild(li), qui insère proprement sans reparser ni risque d'injection.
Rappel libre

Sans remonter dans la leçon : qu'est-ce que le DOM, et quelle est la différence entre querySelector et querySelectorAll ?

Le DOM est la représentation de la page HTML sous forme d'un arbre d'objets : chaque balise devient un objet JavaScript manipulable. querySelector(sel) renvoie LE PREMIER élément qui correspond au sélecteur CSS (ou null). querySelectorAll(sel) renvoie TOUS les éléments correspondants, dans une NodeList qu'on parcourt avec forEach.
Que représente le DOM ?
Que fait document.querySelector(".card") ?
Quelle est la meilleure façon de changer le style d'un élément ?
Next step

You can now select and change the page content with the DOM. But a page that changes on its own, without reacting to the visitor, stays lifeless. The next lesson listens to the user: events, those clicks, keystrokes and hovers your code can respond to.

Lesson 6: Events →
Besoin d'un développeur pour votre projet ?

Réponse sous 24h · Sans engagement