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.
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 HTML (épurée pour simplifier)
<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
Les éléments d'une page HTML 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:
- html est le parent direct de head et de body, ses deux enfants.
- h1 est le premier enfant de body, p est le deuxième, il est frère de h1
- title est l'unique enfant de head.
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 éléments. 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