Aller au contenu principal

Document Object Model

Le DOM, ou Document Object Model, est une représentation hiérarchique et structurée d'un document HTML ou XML. Il permet aux langages de script, notamment JavaScript, d'interagir dynamiquement avec le contenu d'une page web.

En d'autres termes, le DOM agit comme une interface de programmation qui permet aux développeurs d'accéder, de manipuler et de modifier les éléments et le contenu d'une page web en utilisant du code JavaScript. Chaque élément de la page, tel que les balises HTML, les attributs, et le texte, est représenté sous forme d'objets dans le DOM.

Les objets "window" de l'API DOM​

L'environnement Javascript associé à une page web est initialisé avec plusieurs objets Javascript qui permettent de manipuler la page affichée. Ces objets sont accessibles grâce à l'API DOM (Document Object Model) qui est une interface de programmation standardisée par le W3C. Notre objectif ici n'est pas de décrire en détail l'API DOM mais d'illustrer son exploitation pour manipuler une page web en consultation et en modification. Une lecture plus attentive de la documentation permettra de découvrir tous les objets et fonctions proposés.

Nous commençons la présentation de l'API DOM par l'objet window qui est particulièrement important. Celui-ci représente la fenêtre du navigateur qui affiche la page web. Cet objet propose plusieurs propriétés qui permettent d'obtenir des informations sur la fenêtre et sur la page affichée. Le code ci-dessous présente certaines de ces propriétés en expliquant leur signification. On voit qu'il est possible de connaître la taille de la fenêtre, l'URL de la page et quelques informations sur le navigateur. On voit aussi qu'il est possible d'accéder au document HTML de la page via la propriété document.

Quelques propriétés de l'objet window
window.innerHeight // Hauteur de la fenêtre
window.innerWidth // Largeur de la fenêtre
window.location // URL de la page
window.navigator // Informations sur le navigateur
window.screen // Informations sur l'écran
window.document // Document HTML de la page

Les objets "document" de l'API DOM​

Tous les éléments du document HTML d'une page web sont représentés par des objets Javascript. Ceux-ci sont structurés sous forme d'un arbre qui reflète la structure du document HTML. Pour accéder à ces objets, il faut parcourir cette structure arborescente à partir de l'objet document. Plus précisément il faut utiliser la propriété children qui permet d'obtenir la liste des enfants d'un élément, quel qu'il soit. Ainsi document.children permet d'accéder aux enfants de <html>. De même, document.body.children permet d'accéder aux enfants de <body>. La propriété children est un tableau qui contient les enfants dans l'ordre dans lequel ils apparaissent dans le document HTML. Il est donc possible d'accéder à un enfant particulier en utilisant son indice dans le tableau. Par exemple, document.body.children[0] permet d'accéder au premier enfant de <body>.

Le ci-dessous présente un exemple de document HTML et comment accéder à des éléments HTML en parcourant l'arbre des éléments. On voit par exemple qu'il est possible d'accéder à la première image en utilisant l'expression document.body.children[1].children[0] (attention le premier enfant est a l'indice 0).

<html>
<head>
    <title>Page exemple</title>    
</head>
</head>
<body>
    <h1>Titre</h1>
    <div id="images">
        <img src="http://urlz.fr/TnT">
        <img src="http://urlz.fr/TnU">
    </div>
    <div id="commentaires">
        <div class="commentaire">Très belle image</div>
    <div>
    <script src="src.js"></script>
</body>
</html>