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
→ pSé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 retireBonne 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
→ pSelecting 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 removeBest 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.
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.
L'IA a utilisé getElementById avec un # dans l'id. Retirez le # pour que le sélecteur fonctionne.
document.querySelector(".card") ?