: javascript

DHTML et DOM

Le DHTML (Dynamique HTML) est une technologie mélangeant HTML, Javascript, CSS qui permet de rendre les pages web dynamiques. C'est à dire que leur contenu et apparence peuvent changer sans recharger la page en gérant des interactions avec l'utilisateur.

Le DOM (document object model) est un standard permettant la manipulation de documents depuis des langages informatiques. Dans le cas qui nous intéresse, le DOM représente une page XML, HTML ou XHTML. Et le langage qui la manipule est le javascript.

Il existe plusieurs versions du DOM (voir le lien ci-dessus), actuellement c'est la version DOM-2 qui prédomine.

Le DOM est un moyen de représenter un document sous forme d'une arborescence (comparable à l'organisation des dossiers et fichiers sur un disque dur). Prenons l'exemple d'une page XHTML (épurée pour simplifier)

<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>Titre</h1>
    <p>Un peu de texte</p>
  </body>
</html>

Ce qui peut être vu sous la forme de l'arborescence ci-dessous

dom-arbo.png

Les éléments d'une page XHTML sont imbriqués les uns dans les autres. On dit qu'un élément imbriqué dans un autre est un enfant de celui-ci. L'élément principal (celui qui contient tous les autres) est appelé élément racine (root element). Ici c'est html.

On peut dire les affirmations suivantes concernant ce document:

Vu sous cette forme, il est plus simple de manipuler le document à l'aide de javascript. Il est possible d'ajouter, modifier ou supprimer des élements. On peut changer les attributs de chacun. On peut appliquer des styles CSS à tout ou partie des éléments.

Chaque modification du DOM est immédiatement visible dans le navigateur. Ceci sans devoir recharger une autre page web.

Editer