Lorsqu'un navigateur charge une page Web, une des premières opérations qu'il effectue consiste à charger le DOM (Document Object Model).
Le DOM est une représentation objet des balises HTML de la page.
C'est donc grâce au DOM qu'il est possible de manipuler les balises d'une page Web.
Pour bien visualiser le DOM, prenons l'exemple d'une page qui contient les balises suivantes.
<html>
<head>
<title>Titre d'en-tête</title>
...
</head>
<body>
<div id="page">
<header>
<a href="index.html">Mon site Web</a>
</header>
<div id="contenu">
<section id="principal">
<h1>Zone principale</h1>
<p>J'apprend à manipuler le DOM. <img class="optionnel" src="smiley.png" alt=":-)" /></p>
</section>
</div>
...
</div>
...
</body>
</html>
Puisque les éléments sont organisés de façon hiérarchique, on pourrait les représenter comme suit :
Dans les faits, il y a également un objet document situé en haut de l'objet html. On ne représente pas la balise <!DOCTYPE> dans ce schéma.
Cette représentation graphique illustre bien la hiérarchie des éléments du DOM.
Grâce aux objets qui représentent les balises HTML, il est possible d'effectuer des manipulations du DOM à l'aide de JavaScript.
« Qu'est-ce que le DOM? ». MDN. https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction
« Document Object Model ». Wikipédia. http://fr.wikipedia.org/wiki/Document_Object_Model
▼Publicité
