Le DOM représente le contenu de la page web qui peut être modifié.
Le DOM explique la structure d’un document HTML ou XML et les relations entre les différents « noeuds ». Les feuilles de style (CSS ou Cascading Style Sheet pour HTML ou XSLT pou XML) utilisent une définition spécifique qui est compatible avec le DOM.
DOM HTML
Les pages web utilisent en grande majorité un modèle d’affichage qui suit le DOM.
Exemple d’un DOM HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Page web</title>
</head>
<body>
<h1>Titre de paragaphe</h>
<p>Paragaphe 1</p>
<p>Paragaphe 2</p>
</body>
</html>
Ci-dessus, ce sont les balises (mots entre < et >) qui définissent la structure d’un document selon le DOM.
Chaque balise représente un noeud ou node. Un lien hiérarchique rattache les noeuds (<document>, <html> sont des noeuds avec un lien hiérarchique). <head> et <body> sont les éléments enfants de <html>. Ces balises ont la particularité de ne pas contenir une valeur texte (qui s’affiche dans le document) après le crochet fermant. Différents types de balises ou nodes existent dans le DOM comme les nodes texte, commentaires, document, éléments…
Le type de noeud élément (exemple <h1> et <p>…) contient une valeur texte qui s’affiche sur la page web et qui peut avoir différentes propriétés avec id et class. Les noeuds de type élément avec une propriété sont aussi appelés « noeuds attribut » ou attribute nodes.
Les noeuds de type élément sont considérés comme des « feuilles » (leaf) dans la structure du DOM et peuvent avoir ou ne pas avoir d’éléments enfants. HTML5 définit une collection de noeuds de type éléments (header, nav, article…). HTMLCollection contient la collection ou la liste des éléments d’un document et NodeList la collection ou la liste des noeuds d’un document.