LangagesIntermédiaireSérie : JavaScript

JavaScript : Le DOM

Le Document Object Model : comment le navigateur transforme ton HTML en arbre d'objets manipulable, comment le lire, le modifier, et pourquoi React existe.

Par Baptiste Vidal

3 min de lecture

Mis à jour il y a 1 mois

javascriptjsdomhtmlnavigateurevenements

JavaScript : Le DOM

On a vu que JavaScript sert à rendre une page interactive. Mais interactive avec quoi, exactement ? Avec le DOM. C'est le pont entre ton code JavaScript et ce que l'utilisateur voit à l'écran. Et c'est aussi la raison d'être de React.

# Le DOM, c'est quoi ?

DOM signifie Document Object Model. Quand le navigateur charge une page, il ne se contente pas d'afficher du HTML : il en construit une représentation en mémoire, sous forme d'un arbre d'objets. Ce sont ces objets que ton JavaScript peut lire et modifier.

Autrement dit :

Le HTML, c'est le texte de départ, statique.
Le DOM, c'est sa version vivante et manipulable, construite par le navigateur.

Modifier le DOM, c'est modifier ce qui est affiché, en temps réel, sans recharger la page.

# Un arbre de nœuds

Chaque balise HTML devient un nœud dans l'arbre, avec des relations parent-enfant qui reflètent l'imbrication du HTML.

Ce HTML :

<body>
  <h1>Titre</h1>
  <ul>
    <li>Un</li>
    <li>Deux</li>
  </ul>
</body>

<body>

  <h1>Titre</h1>

  <ul>

    <li>Un</li>

    <li>Deux</li>

  </ul>

</body>

Donne cet arbre DOM :

body
 ├── h1  ("Titre")
 └── ul
      ├── li  ("Un")
      └── li  ("Deux")

body

 ├── h1  ("Titre")

 └── ul

      ├── li  ("Un")

      └── li  ("Deux")

Naviguer dans cet arbre (parent, enfants, voisins) est possible, mais en pratique on cible plutôt les éléments directement.

# Sélectionner des éléments

Pour agir sur un élément, il faut d'abord le récupérer. Les méthodes modernes reposent sur les sélecteurs CSS :

// Le premier élément qui correspond au sélecteur CSS
const titre = document.querySelector("h1");
const bouton = document.querySelector("#valider");   // par id
const carte = document.querySelector(".carte");      // par classe (le premier trouvé)

// Tous les éléments correspondants (une liste)
const tousLesLi = document.querySelectorAll("li");

// Le premier élément qui correspond au sélecteur CSS

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

const bouton = document.querySelector("#valider");   // par id

const carte = document.querySelector(".carte");      // par classe (le premier trouvé)

// Tous les éléments correspondants (une liste)

const tousLesLi = document.querySelectorAll("li");

querySelector et querySelectorAll couvrent la grande majorité des besoins.

# Modifier le DOM

Une fois l'élément récupéré, on peut changer son contenu, son style ou ses attributs :

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

titre.textContent = "Nouveau titre";    // change le texte
titre.classList.add("actif");           // ajoute une classe CSS
titre.style.color = "indigo";           // change un style
titre.setAttribute("data-id", "42");    // change un attribut

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

titre.textContent = "Nouveau titre";    // change le texte

titre.classList.add("actif");           // ajoute une classe CSS

titre.style.color = "indigo";           // change un style

titre.setAttribute("data-id", "42");    // change un attribut

On peut aussi créer et insérer de nouveaux éléments :

const item = document.createElement("li");
item.textContent = "Trois";
document.querySelector("ul").appendChild(item);

const item = document.createElement("li");

item.textContent = "Trois";

document.querySelector("ul").appendChild(item);

# Réagir aux événements

C'est le cœur de l'interactivité : exécuter du code quand l'utilisateur fait quelque chose (clic, saisie, survol). On attache un écouteur d'événement avec addEventListener :

const bouton = document.querySelector("#valider");

bouton.addEventListener("click", () => {
  console.log("Bouton cliqué !");
});

const bouton = document.querySelector("#valider");

bouton.addEventListener("click", () => {

  console.log("Bouton cliqué !");

});

Les événements les plus courants : click, input (saisie dans un champ), submit (envoi de formulaire), mouseover (survol).

# Et React dans tout ça ?

Manipuler le DOM à la main, comme ci-dessus, fonctionne très bien sur une petite page. Mais sur une vraie application, ça devient vite ingérable : il faut retrouver les bons éléments, penser à tout mettre à jour au bon moment, éviter les incohérences. Le code se transforme en plat de spaghettis.

C'est exactement le problème que React résout. Avec React, tu ne touches (presque) plus jamais au DOM directement. Tu décris l'interface que tu veux pour un état donné, et React se charge de mettre le DOM à jour pour toi, de façon optimisée (c'est le rôle du Virtual DOM vu en introduction).

Comprendre le DOM reste essentiel : c'est ce que React automatise, et savoir ce qui se passe dessous t'évitera bien des incompréhensions.

# À retenir

Le DOM est la représentation en mémoire de la page, sous forme d'arbre d'objets, construite par le navigateur à partir du HTML.
On sélectionne des éléments avec querySelector / querySelectorAll, puis on les modifie (textContent, classList, style).
On rend la page interactive en réagissant aux événements avec addEventListener.
Manipuler le DOM à la main devient vite ingérable sur une grosse app : c'est précisément ce que React automatise pour toi.

Prochaine étape : construire un vrai composant réutilisable en JavaScript pur pour toucher du doigt ce problème, dans Des composants à la main.

Pour aller plus loin

JavaScript : Des composants à la main

Construire un composant réutilisable et réactif en JavaScript pur, puis voir concrètement, ligne à ligne, ce que React automatise pour toi.

Lire Intermédiaire