Comprendre le Document Object Model (DOM) - Apprendre JavaScript

Le Document Object Model (DOM) est un pilier du développement web, servant de pont entre le contenu d'une page (HTML), sa présentation (CSS) et son comportement interactif (JavaScript). Cet article explore la nature du DOM, sa relation avec HTML et CSS, et la façon dont les navigateurs le construisent pour afficher une page web.

Qu'est-ce que le DOM ?

Le DOM est une interface de programmation implémentée par les navigateurs qui permet aux scripts de lire, manipuler et modifier le contenu, la structure et le style d'un site web de manière dynamique. Il représente une page web sous la forme d'un arbre d'objets, où chaque nœud correspond à une partie du document — un élément, un attribut, un morceau de texte ou un commentaire. Le DOM ne fait pas partie des spécifications HTML ou JavaScript ; il est construit par le navigateur conformément à la spécification DOM standardisée par le WHATWG et le World Wide Web Consortium (W3C).

Une façon utile d'y penser : le fichier HTML est la recette, et le DOM est le plat vivant que le navigateur sert réellement. Une fois l'analyse terminée, le texte HTML n'existe plus — votre JavaScript ne communique qu'avec le DOM. C'est pourquoi document.body.innerHTML = '...' modifie la page mais ne réécrit jamais le fichier .html original sur le disque.

Comment HTML se mappe à un arbre DOM

Considérez ce court extrait de balisage :

<body>
  <h1>Hello</h1>
  <p>A <em>short</em> note.</p>
</body>

Le navigateur le transforme en un arbre où chaque balise devient un nœud élément et chaque suite de texte devient un nœud texte :

HTMLBodyElement (body)
├── HTMLHeadingElement (h1)
│   └── #text "Hello"
└── HTMLParagraphElement (p)
    ├── #text "A "
    ├── HTMLElement (em)
    │   └── #text "short"
    └── #text " note."

Notez que les espaces et le texte entre les balises deviennent eux aussi de vrais nœuds — une surprise courante lorsque vous vous attendez à ce que firstChild soit le <h1> mais que vous obtenez un nœud texte à la place. Pour savoir comment le navigateur catégorise chaque type de nœud, consultez Comprendre les nœuds du DOM et Propriétés des nœuds : type, balise et contenu.

Explorez nos sections JavaScript DOM

Ce chapitre est le point d'entrée d'une série complète sur l'utilisation du DOM en JavaScript. Chaque sujet ci-dessous renvoie à un chapitre dédié :

Comprendre les nœuds du DOM — les blocs fondamentaux du DOM et leur structure.
Sélectionner des éléments du DOM — méthodes pour trouver des éléments, notamment getElement* et querySelector.
Manipuler le DOM — ajouter, supprimer et modifier des éléments pour créer des pages dynamiques.
Travailler avec les styles dans le DOM — appliquer et lire des styles CSS via JavaScript.
Gestion des événements dans le DOM — répondre efficacement aux interactions des utilisateurs.
Parcourir le DOM — naviguer dans l'arbre pour atteindre les nœuds parents, enfants et frères.
Techniques de manipulation du DOM — DocumentFragments, clonage de nœuds et regroupement des mises à jour.
Travailler avec les formulaires — lire les saisies, valider et gérer les soumissions.
Techniques avancées du DOM — manipulations complexes et optimisations.
Bibliothèques de manipulation du DOM — bibliothèques comme jQuery qui simplifient les tâches courantes.
Compatibilité du DOM entre navigateurs — maintenir la cohérence des manipulations entre navigateurs.
Accessibilité et DOM — bonnes pratiques pour des pages accessibles.
Débogage et outils — inspecter et dépanner le DOM.
Optimisation des performances — stratégies pour des mises à jour rapides et fluides.
Éléments interactifs et widgets — créer des composants interactifs attrayants.

Relation entre HTML, CSS et le DOM

HTML, CSS et le DOM interagissent étroitement pour produire une page web :

HTML fournit la structure de base des pages, qui est ensuite représentée sous forme d'arbre DOM.
CSS est utilisé pour contrôler la mise en page et l'apparence des éléments du DOM. Le navigateur analyse les styles pour construire un CSSOM (CSS Object Model), qui est combiné avec le DOM pour construire l'arbre de rendu. Lorsque les styles changent, le navigateur recalcule les styles calculés et met à jour l'arbre de rendu en conséquence, reflétant les changements de style.
JavaScript utilise le DOM pour interagir avec et modifier HTML et CSS, permettant des changements dynamiques dans le contenu et le style de la page.

Le processus est symbiotique : HTML est transformé en DOM, CSS stylise le DOM, et JavaScript manipule le DOM, ce qui met à jour ce que l'utilisateur voit à l'écran.

Comment le navigateur construit le DOM

Le processus de construction du DOM est une étape cruciale dans la façon dont les navigateurs web interprètent le HTML et CSS d'une page web et les transforment en un affichage visible et interactif. Voici comment ce processus se déroule typiquement :

Analyse du HTML : Le navigateur analyse le code source HTML d'une page web. Au cours de ce processus d'analyse, le navigateur identifie les éléments tels que les balises, les attributs et leur contenu textuel. Chaque élément, attribut et morceau de texte devient une partie de l'arbre DOM en tant que nœud.
Construction de l'arbre DOM : Au fur et à mesure que le HTML est analysé, le navigateur construit un arbre DOM où chaque nœud représente un objet dans le document. Cette structure en arbre reflète la structure HTML mais permet aux langages de programmation comme JavaScript d'interagir avec les éléments de la page par programme.
Construction de l'arbre de rendu : Parallèlement à la construction de l'arbre DOM, le navigateur construit un arbre de rendu qui combine les éléments DOM avec leurs styles CSS correspondants. Contrairement à l'arbre DOM, l'arbre de rendu n'inclut pas les éléments non visuels comme les balises <script> ou les éléments avec display: none;.
Mise en page : Une fois l'arbre de rendu construit, le navigateur calcule la mise en page, déterminant la position et la taille exactes de chaque objet à l'écran.
Peinture : La dernière étape consiste à peindre l'arbre de rendu à l'écran. Cette étape traduit les nœuds de l'arbre de rendu en pixels réels à l'écran, affichant ainsi la page web.

Exemple pratique : construction et style d'une page web

Voici un exemple HTML simple qui illustre l'interaction entre HTML, CSS et le DOM :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Sample DOM Page</title>
    <style>
        #container {
            border: 2px solid black;
            padding: 20px;
            margin-top: 20px;
        }
        h1 {
            color: navy;
        }
        p {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div id="container">
        <h1>Welcome to Our Website</h1>
        <p>This is a sample paragraph to demonstrate the DOM in action.</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const heading = document.querySelector('h1');
            heading.style.backgroundColor = 'yellow';
        });
    </script>
</body>
</html>

Essayez vous-même »

Explication de l'exemple

Structure HTML : Ce document HTML définit la structure de la page, comprenant un conteneur div qui contient un titre et un paragraphe.
Style CSS : Les styles CSS inline stylisent le conteneur, le titre et le paragraphe, illustrant comment CSS affecte l'apparence des éléments HTML.
Interaction JavaScript : Un script inline attend le chargement du DOM, puis modifie la couleur d'arrière-plan du titre en jaune. Cette interaction montre comment JavaScript peut manipuler le DOM après que le navigateur l'a construit.

Lire l'arbre depuis JavaScript

Vous n'avez pas besoin d'un navigateur pour raisonner sur le DOM comme structure de données — c'est simplement un graphe d'objets. L'extrait ci-dessous construit un petit arbre d'objets simples qui reflète la forme du DOM (enfants, noms de balises, texte) et le parcourt pour compter les nœuds éléments, exactement comme le ferait querySelectorAll('*').length dans un navigateur :

// A minimal model of a DOM subtree.
const tree = {
  tag: 'body',
  children: [
    { tag: 'h1', children: [{ text: 'Hello' }] },
    {
      tag: 'p',
      children: [
        { text: 'A ' },
        { tag: 'em', children: [{ text: 'short' }] },
        { text: ' note.' },
      ],
    },
  ],
};

function countElements(node) {
  // A node is an "element" when it has a tag; text nodes only have `text`.
  let count = node.tag ? 1 : 0;
  for (const child of node.children ?? []) {
    count += countElements(child);
  }
  return count;
}

console.log(countElements(tree)); // 4

L'arbre contient quatre nœuds éléments (body, h1, p, em) ; les chaînes simples sont des nœuds texte et ne sont pas comptées. Cette descente récursive reprend la même idée que la vraie traversée du DOM — consultez Parcourir le DOM pour les API du navigateur (childNodes, firstElementChild, parentNode et autres).

Erreurs courantes

Le texte et les espaces sont aussi des nœuds. element.childNodes inclut des nœuds texte pour les sauts de ligne et les espaces entre les balises. Utilisez children ou firstElementChild lorsque vous voulez uniquement des éléments.
Exécutez les scripts après l'existence du DOM. Un <script> dans <head> s'exécute avant que le corps ne soit analysé, donc document.querySelector('h1') renvoie null. Attendez DOMContentLoaded, placez le script à la fin de <body>, ou ajoutez l'attribut defer.
innerHTML n'est pas gratuit. Affecter innerHTML ré-analyse la chaîne et reconstruit tout ce sous-arbre, abandonnant les nœuds existants et leurs écouteurs d'événements. Pour de petits changements de texte, préférez textContent ; pour des changements structurels, envisagez les DocumentFragments.
Le DOM est vivant, la source HTML ne l'est pas. Modifier le DOM ne change jamais le fichier HTML d'origine, et « Afficher la source » montre le fichier tel qu'il a été délivré, pas le DOM actuel. Utilisez le panneau Éléments du navigateur pour inspecter l'arbre en direct.

Info

Pour optimiser les interactions web, familiarisez-vous avec les propriétés des nœuds du DOM. Comprendre les différents types de nœuds, tels que les éléments et le texte, améliore votre capacité à écrire du JavaScript efficace et ciblé pour la manipulation dynamique du contenu web.

Conclusion

Comprendre le DOM est essentiel pour tout développeur web. Il fournit les moyens d'accéder et de mettre à jour dynamiquement le contenu, la structure et le style d'une page web. En maîtrisant la façon dont le DOM interagit avec HTML et CSS, les développeurs peuvent créer des applications web plus efficaces et dynamiques. Cette connaissance fondamentale est cruciale pour manipuler le contenu web et créer des sites web interactifs et dynamiques.

Entraînement

Pratique

Quel rôle joue JavaScript avec le Document Object Model (DOM) ?

JavaScript est utilisé pour appliquer des styles CSS au DOM.JavaScript peut manipuler le DOM pour ajouter, modifier ou supprimer des éléments et attributs HTML.JavaScript est utilisé pour stocker et récupérer des données dans le DOM.JavaScript peut modifier tous les éléments HTML de la page via le DOM.JavaScript est utilisé pour gérer les événements sur les éléments HTML.JavaScript ne peut pas modifier le contenu des éléments HTML.