Introduction au DOM

Qu'est-ce que le DOM ?

Le Modèle Objet de Document (DOM) est une interface de programmation pour les documents web. Il représente la page de sorte que des programmes puissent modifier la structure, le style et le contenu du document. Le DOM représente le document sous forme de nœuds et d'objets ; ainsi, les langages de programmation peuvent interagir avec la page.

Une page web est un document qui peut être affiché soit dans la fenêtre du navigateur, soit sous forme de code source HTML. Dans les deux cas, il s'agit du même document, mais la représentation DOM permet de le manipuler. En tant que représentation orientée objet de la page web, il peut être modifié avec un langage de script comme JavaScript.

Par exemple, le DOM spécifie que la méthode querySelectorAll dans ce code doit retourner une liste de tous les éléments <p> du document :

const paragraphs = document.querySelectorAll("p");
// paragraphes[0] est le premier élément <p>
// paragraphes[1] est le second élément <p>, etc.
alert(paragraphes[0].nodeName);

Toutes les propriétés, méthodes et événements permettant de manipuler et de créer des pages web sont organisées en objets. Par exemple, l'objet document qui représente le document lui-même, les objets table qui implémentent l'interface DOM HTMLTableElement pour accéder aux tableaux HTML, etc., sont tous des objets.

Le DOM est construit à partir de plusieurs API qui fonctionnent ensemble. Le DOM de base définit les entités qui décrivent n'importe quel document et les objets qu'il contient. Ce socle est complété, si besoin, par d'autres API qui ajoutent de nouvelles fonctionnalités et capacités au DOM. Par exemple, l'API DOM HTML ajoute la prise en charge des documents HTML au DOM de base, et l'API SVG ajoute la prise en charge des documents SVG.

DOM et JavaScript

L'exemple précédent, comme presque tous les exemples, est en JavaScript. Il est écrit en JavaScript, mais utilise le DOM pour accéder au document et à ses éléments. Le DOM n'est pas un langage de programmation, mais sans lui, le langage JavaScript n'aurait aucun modèle ni aucune notion des pages web, des documents HTML, SVG et de leurs composants. Le document dans son ensemble, l'en-tête, les tableaux, les en-têtes de colonnes, le texte dans les cellules et tous les autres éléments d'un document font partie du modèle objet de document (DOM) de ce document. Ils sont tous accessibles et peuvent être manipulés à l'aide du DOM et d'un langage de script comme JavaScript.

Le DOM n'est pas une partie du langage JavaScript, mais une API Web utilisée pour construire des sites web. JavaScript peut aussi être utilisé dans d'autres contextes. Par exemple, Node.js exécute des programmes JavaScript sur un ordinateur, mais fournit un autre ensemble d'API, et l'API DOM n'en fait pas partie.

Le DOM a été conçu pour être indépendant de tout langage de programmation, ce qui rend la représentation structurelle du document disponible via une API simple et cohérente. Même si la plupart des développeur·euse·s web utilisent le DOM via JavaScript, des implémentations du DOM peuvent être construites pour n'importe quel langage, comme le montre cet exemple en Python :

# Exemple d'utilisation du DOM en Python
import xml.dom.minidom as m
doc = m.parse(r"C:\\Projects\\Py\\chap1.xml")
doc.nodeName # Propriété DOM de l'objet document
p_list = doc.getElementsByTagName("para")

Pour plus d'informations sur les technologies impliquées dans l'écriture de JavaScript sur le web, voir Survol des technologies JavaScript.

Accéder au DOM

Il n'y a rien de particulier à faire pour commencer à utiliser le DOM. Vous utilisez l'API directement en JavaScript dans ce qu'on appelle un script, un programme exécuté par un navigateur.

Lorsque vous créez un script, qu'il soit intégré dans un élément <script> ou inclus dans la page web, vous pouvez immédiatement utiliser l'API pour les objets document ou window afin de manipuler le document lui-même ou n'importe quel élément de la page web (les descendants du document). Votre programmation DOM peut être aussi simple que l'exemple suivant, qui affiche un message dans la console à l'aide de la fonction console.log() :

<body onload="console.log('Bienvenue sur ma page Web&nbsp;!');">
  …
</body>

En général, il n'est pas recommandé de mélanger la structure de la page (écrite en HTML) et la manipulation du DOM (écrite en JavaScript). Les parties JavaScript seront donc regroupées ici et séparées du HTML.

Par exemple, la fonction suivante crée un nouvel élément h1, y ajoute du texte, puis l'ajoute à l'arbre du document :

<html lang="fr">
  <head> </head>
  <body>
    <script>
      // crée quelques éléments dans une page HTML vide
      const heading = document.createElement("h1");
      const headingText = document.createTextNode("Gros titre&nbsp;!");
      heading.appendChild(headingText);
      document.body.appendChild(heading);
    </script>
  </body>
</html>

Types de données fondamentaux

Cette page tente de décrire les différents objets et types de la manière la plus simple possible. Mais il existe un certain nombre de types de données utilisés par l'API que vous devez connaître.

Le tableau suivant décrit brièvement ces types de données.

Il existe également quelques points de terminologie à garder à l'esprit. Il est courant de désigner tout nœud Attr comme un « attribut », par exemple, et de désigner un tableau de nœuds DOM comme un « nodeList ». Vous trouverez ces termes et d'autres introduits et utilisés dans toute la documentation.

Interfaces DOM

Ce guide porte sur les objets et les véritables choses que vous pouvez utiliser pour manipuler la hiérarchie du DOM. Il y a de nombreux points où la compréhension de leur fonctionnement peut prêter à confusion. Par exemple, l'objet représentant l'élément HTML form obtient sa propriété name de l'interface HTMLFormElement mais sa propriété className de l'interface HTMLElement. Dans les deux cas, la propriété souhaitée se trouve dans cet objet formulaire.

Cependant, la relation entre les objets et les interfaces qu'ils implémentent dans le DOM peut prêter à confusion, c'est pourquoi cette section tente de présenter brièvement les interfaces figurant dans la spécification du DOM et la manière dont elles sont rendues disponibles.

Interfaces et objets

De nombreux objets implémentent plusieurs interfaces différentes. Par exemple, l'objet table implémente une interface spécialisée HTMLTableElement, qui comprend des méthodes comme createCaption et insertRow. Mais comme il s'agit aussi d'un élément HTML, table implémente l'interface Element décrite dans le chapitre de référence DOM Element. Enfin, comme un élément HTML est aussi, du point de vue du DOM, un nœud dans l'arbre de nœuds qui composent le modèle objet d'une page HTML ou XML, l'objet table implémente aussi l'interface plus basique Node, dont dérive Element.

Lorsque vous obtenez une référence à un objet table, comme dans l'exemple suivant, vous utilisez régulièrement ces trois interfaces de manière interchangeable sur l'objet, parfois sans le savoir.

const table = document.getElementById("table");
const tableAttrs = table.attributes; // Interface Node/Element
for (const attr of tableAttrs) {
  // Interface HTMLTableElement : attribut border
  if (attr.nodeName.toLowerCase() === "border") {
    table.border = "1";
  }
}
// Interface HTMLTableElement : attribut summary
table.summary = "note : bordure plus large";

Interfaces principales du DOM

Cette section liste certaines des interfaces les plus couramment utilisées dans le DOM. L'idée n'est pas de décrire ici ce que font ces API, mais de donner une idée des méthodes et propriétés que vous verrez très souvent en utilisant le DOM. Ces API communes sont utilisées dans les exemples plus longs du chapitre Exemples d'utilisation du DOM.

Les objets document et window sont ceux dont les interfaces sont les plus souvent utilisées dans la programmation DOM. En termes simples, l'objet window représente le navigateur, et l'objet document est la racine du document lui-même. Element hérite de l'interface générique Node, et ensemble ces deux interfaces fournissent de nombreuses méthodes et propriétés utilisables sur des éléments individuels. Ces éléments peuvent également avoir des interfaces spécifiques pour traiter le type de données qu'ils contiennent, comme dans l'exemple de l'objet table ci-dessus.

Voici une brève liste d'API courantes pour le script de page web ou XML utilisant le DOM :

• document.querySelector()
• document.querySelectorAll()
• document.createElement()
• Element.innerHTML
• Element.setAttribute()
• Element.getAttribute()
• EventTarget.addEventListener()
• HTMLElement.style
• Node.appendChild()
• window.onload
• window.scrollTo()

Exemples

Définir le contenu textuel

Cet exemple utilise un élément <div> contenant un <textarea> et deux éléments <button>. Lorsque l'utilisateur·ice clique sur le premier bouton, du texte est ajouté dans le <textarea>. Lorsque l'utilisateur·ice clique sur le second bouton, le texte est effacé. On utilise :

• Document.querySelector() pour accéder au <textarea> et aux boutons
• EventTarget.addEventListener() pour écouter les clics sur les boutons
• Node.textContent pour définir et effacer le texte.

HTML

<div class="container">
  <textarea class="story"></textarea>
  <button id="set-text" type="button">Définir le contenu textuel</button>
  <button id="clear-text" type="button">Effacer le contenu textuel</button>
</div>

CSS

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 200px;
}

JavaScript

const story = document.body.querySelector(".story");

const setText = document.body.querySelector("#set-text");
setText.addEventListener("click", () => {
  story.textContent = "Il était une nuit sombre et orageuse...";
});

const clearText = document.body.querySelector("#clear-text");
clearText.addEventListener("click", () => {
  story.textContent = "";
});

Résultat

Ajouter un élément enfant

Cet exemple utilise un élément <div> contenant un autre <div> et deux éléments <button>. Lorsque l'utilisateur·ice clique sur le premier bouton, un nouvel élément est créé et ajouté comme enfant du <div>. Lorsque l'utilisateur·ice clique sur le second bouton, l'enfant est retiré. On utilise :

• Document.querySelector() pour accéder au <div> et aux boutons
• EventTarget.addEventListener() pour écouter les clics sur les boutons
• Document.createElement pour créer l'élément
• Node.appendChild() pour ajouter l'enfant
• Node.removeChild() pour retirer l'enfant.

HTML

<div class="container">
  <div class="parent">parent</div>
  <button id="add-child" type="button">Ajouter un enfant</button>
  <button id="remove-child" type="button">Retirer l'enfant</button>
</div>

CSS

.container {
  display: flex;
  gap: 0.5rem;
  flex-direction: column;
}

button {
  width: 100px;
}

div.parent {
  border: 1px solid black;
  padding: 5px;
  width: 100px;
  height: 100px;
}

div.child {
  border: 1px solid red;
  margin: 10px;
  padding: 5px;
  width: 80px;
  height: 60px;
  box-sizing: border-box;
}

JavaScript

const parent = document.body.querySelector(".parent");

const addChild = document.body.querySelector("#add-child");
addChild.addEventListener("click", () => {
  // N'ajoute un enfant que s'il n'y en a pas déjà un (hors texte "parent")
  if (parent.childNodes.length > 1) {
    return;
  }
  const child = document.createElement("div");
  child.classList.add("child");
  child.textContent = "enfant";
  parent.appendChild(child);
});

const removeChild = document.body.querySelector("#remove-child");
removeChild.addEventListener("click", () => {
  const child = document.body.querySelector(".child");
  parent.removeChild(child);
});

Résultat

Spécifications