Le DOM

C'est quoi le DOM ?

Jusqu'ici, JavaScript calculait et stockait des valeurs. Mais sa vraie puissance, c'est d'interagir avec la page web : lire un élément, le modifier, en ajouter, en supprimer.

Pour ça, JavaScript utilise le DOM — Document Object Model. C'est une représentation de ta page HTML sous forme d'objets. Quand le navigateur charge une page, il la traduit en DOM. JavaScript peut alors tout lire et tout modifier.

Imagine que ta page HTML est un livre. Le DOM, c'est la table des matières. JavaScript l'utilise pour trouver et modifier n'importe quelle partie.

HTML

<div id="message">Bonjour !</div>
<p class="texte">Un paragraphe.</p>
<button>Cliquez-moi</button>

Chaque balise HTML devient un objet dans le DOM. JavaScript accède à ces objets et les manipule.

Accéder à un élément par son id

document.getElementById() cherche l'élément avec l'id demandé. Les id sont uniques dans une page, donc elle retourne un seul élément.

HTML + JavaScript

<!-- HTML -->
<h1 id="titre">Bienvenue</h1>
<p  id="compteur">0</p>

<!-- JavaScript -->
const titre    = document.getElementById("titre");
const compteur = document.getElementById("compteur");

console.log(titre);    // l'objet DOM représentant le <h1>
console.log(compteur); // l'objet DOM représentant le <p>

querySelector — plus puissant, plus flexible

document.querySelector() utilise la même syntaxe que CSS. C'est la méthode préférée des développeurs modernes.

JavaScript

// Sélectionner par id (le # comme en CSS)
const titre = document.querySelector("#titre");

// Sélectionner par classe (le . comme en CSS)
const texte = document.querySelector(".message");

// Sélectionner par balise
const bouton = document.querySelector("button");

// Sélecteur CSS complexe — bouton dans un formulaire
const submit = document.querySelector("form button[type='submit']");

💡

querySelector retourne le premier élément trouvé. Pour tous les éléments, utilise querySelectorAll() — qui retourne un tableau.

JavaScript

// querySelectorAll — retourne tous les éléments
const tousBoutons = document.querySelectorAll("button");

// On peut itérer dessus avec forEach
tousBoutons.forEach(function(bouton) {
  console.log(bouton.textContent);
});

Lire les propriétés d'un élément

Une fois l'élément récupéré, on peut lire ses propriétés :

JavaScript

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

// Texte de l'élément (sans HTML)
console.log(titre.textContent); // "Bienvenue"

// Contenu HTML de l'élément
console.log(titre.innerHTML); // "Bienvenue"

// Attribut (ex: la valeur d'un input)
const input = document.querySelector("#monInput");
console.log(input.value); // ce que l'utilisateur a tapé

// La classe CSS
console.log(titre.className);

Vérifier que l'élément existe

Si l'élément n'existe pas, querySelector retourne null. Utiliser une propriété sur null cause une erreur. Vérifie toujours que l'élément existe avant de l'utiliser.

JavaScript

const element = document.querySelector("#elementQuiNexistePas");

if (element) {
  // On est sûr que l'élément existe
  console.log(element.textContent);
} else {
  console.log("Élément introuvable !");
}

✅

Récapitulatif des méthodes de sélection :
• document.getElementById("monId") → par id
• document.querySelector(".maClasse") → premier élément (sélecteur CSS)
• document.querySelectorAll("p") → tous les éléments correspondants
• document.querySelector("form input") → sélecteurs CSS complexes

// À retenir

Le DOM = représentation de la page HTML en objets JavaScript
document = l'objet racine qui représente toute la page
document.getElementById("id") → élément par son id
document.querySelector("sélecteur CSS") → premier élément correspondant
document.querySelectorAll("sélecteur") → tous les éléments
element.textContent lit le texte, element.innerHTML lit le HTML
input.value lit ce que l'utilisateur a saisi
Toujours vérifier que l'élément existe avant de l'utiliser