Le DOM (Document Object Model)

Les prérequis :

Avant d’aller plus loin, Il est recommandé de maîtriser les bases du HTML et du XML. Ces languages de balisages sont essentiels pour mieux comprendre la manière dont les pages web son structurées.

Le DOM ou Document Object Model est une API (Application Programming Interface) qui joue le rôle d’intermédiaire entre les pages HTML / XML et les programmes qui interagissent avec elle (Javascript, Python,Java, etc.)

En pratique, le DOM permet de :

Naviguer dans la stucture d’un document.
Identifier et manipuler ses éléments (<p>, <div>, <a>, etc.)
Modifier leurs attributs (id, class, etc) ou leur contenu.

C’est donc une technologie côté client (client-side). C’est le navigateur qui transforme le code source en un modèle manipulable.

Pourquoi le DOM est important ?

Le DOM représente un document sous forme d’arbre hiérarchique (DOM Tree). Chaque nœud de cet arbre correspond à un objet manipulable :

Les balises HTML/XML → deviennent des nœuds.
Le contenu texte → devient aussi un nœud.
Les attributs (ex : href, src) → sont également accessibles.

Ainsi, le DOM modélise non seulement la structure, mais aussi les comportements et relations entre les composants d’une page.

L’origine de la création du DOM

À l’origine, chaque navigateur avait sa propre manière d’interagir avec le contenu d’une page. Le DOM a été standardisé par le W3C pour uniformiser ces pratiques.

Il est issu de plusieurs influences, notamment :

DHTML (Dynamic HTML)
SGML groves
HyTime
Et d’autres modèles développés par divers fournisseurs.

Objectif principal est de permettre à JavaScript et Java de manipuler une page sans dépendre du navigateur utilisé.

Comment est créé l’arbre DOM ?

Après que le document HTML /XML soit téléchargé à partir du serveur. Le navigateur lit puis analyse l’architecture du document ligne par ligne. Au fur et à mesure, il identifie les balises, leurs attributs et leurs contenus et en même temps, il construit l’arbre DOM.

L’exemple suivant schématise la construction de l’architecture du DOM-Tree d’un document HTML :

Représentation DOM :

Document
└── html
├── head
│ ├── title (« Exemple DOM »)
│ ├── meta
│ └── link
└── body
├── header
│ ├── img (src= »image.jpg »)
│ └── a (href= »https://exemple.com »)
├── article
│ ├── h1 (« Bienvenue »)
│ └── p (« Ceci est un paragraphe. »)
└── footer
├── h6 (« Contact »)
└── a (href= »https://exemple.com »)

Code HTML de l’architecture précédente :

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple DOM</title>
    <meta charset="UTF8">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <img src="img.jpg">
      <a href="https://exemple.com">Lien</a>
    </header>
    <article>
      <h1>bienvenue</h1>
      <p>Ceci est un paragraphe.</p>
    </article>
    <footer>
      <h6>Contact</h6>
      <a href="https://exemple.com">Lien</a>
    </footer>
  </body>
</html>

Le DOM et le Web Scraping

Le DOM est la base du Web Scraping, car les scrapper parcourent le Dom afin d’extraire le contenu voulu, Ainsi comprendre le DOM d’une page permet facilement d’extraire la valeur de <h1> par exemple ou le contenu de l’attribut href d’une balise <a>.

Des outils comme BeautifulSoup (Python) ou Selenium permettent de naviguer dans ce DOM comme s’il s’agit d’une Base de donnée hiérarchique.

Lire aussi l’article dédié à ce sujet : Web Scraping

Références :

Web