Retour au cours

Qu'est-ce que le DOM ? (Document Object Model)

JavaScript : Le cours complet pour débutant, de « Zéro à Héros »

78. Qu'est-ce que le DOM ? (Document Object Model)

Le Document Object Model (DOM) est une interface qui traite un document HTML ou XML comme une structure en arbre, où chaque nœud de l'arbre représente une partie du document (éléments, attributs, texte, etc.).

JavaScript interagit avec la page web presque entièrement via le DOM.

L'arbre DOM

Si vous avez ce HTML :

html

Bonjour

Texte

Le DOM le représente comme une hiérarchie :

  • window (Objet global)
    • document (Le point d'entrée)
      • <html>
        • <head>
        • <body>
          • <h1> (Nœud élément)
            • 'Bonjour' (Nœud texte)
          • <p> (Nœud élément)

Pourquoi le DOM est-il nécessaire ?

Il fournit une manière standardisée pour JavaScript de :

  1. Trouver des éléments sur la page.
  2. Modifier le contenu (texte ou attributs) des éléments.
  3. Ajouter ou Supprimer des éléments dynamiquement.
  4. Répondre aux actions de l'utilisateur (comme les clics).