Présentation du DOM

Une des principales fonctionnalités de JavaScript c'est la manipulation fu HTML et du CSS de la page. Pour faire ça il interagit avec le DOM.

Qu'est-ce que le DOM ?

Le DOM (Document Object Model) c'est une représentation en mémoire de la structure d'une page HTML.

Le DOM peut être sélectionné, modifié, écouté etc, etc.

JavaScript considère que la structure du HTML est une liste de noeuds (nodes) avec des nœuds parents et des nœuds enfants.

Exemple de structure de noeuds

<ul> <!-- Noeud parent -->
    <li>Salade</li> <!-- Noeud enfant 1 -->
    <li>Tomate</li> <!-- Noeud enfant 2 -->
    <li>Oignon</li> <!-- Noeud enfant 3 -->
</ul>

Dans cet exemple notre <ul> est le nœud parent et les <li> sont les nœuds enfants.

Et toute la structure du document peut être représentée ainsi.

À quoi ça nous sert ?

Le DOM et le fait qu'il soit ainsi modélisé cela va nous permettre de le manipuler directement dans JavaScript , par exemple pour ajouter ou supprimer des éléments de la page. Nous allons pouvoir stocker des noeuds dans des variables et travailler avec en toute tranquilité dans notre JavaScript.

08 January 2026