Attention, il ne faut pas confondre DOM (Document Object Model) avec un énième langage de programmation, mais bien prendre en considération que c'est une manière de pouvoir explorer ou manipuler l'arborescence d'un document structuré de type XML ou HTML.
La cerise sur le gâteau, c'est que le DOM restant une recommandation du W3C, celui-ci se préserve de tout propriétarisme de quelques technologies que ce soit. De ce fait, il ne faut pas sans arrêt réinventer la roue, ni l'eau chaude....
Concrètement, cela signifie que ceux d'entre vous qui ont déjà exploré une quelconque arborescence de type XML dans un quelconque langage (compatible avec les standards...) vont pouvoir comprendre les mécaniques d'exploration du DOM du HTML en quelques minutes....
Malgré cette dernière remarque, ce tutorial, n'a aucunement la prétention de couvrir l'ensemble de l'exploration du DOM, mais du moins de vous en apporter de bonnes bases d'exploration...
Vous pourrez également le compléter avec l'introduction au DOM Scripting au cours du tutorial sur AJAX. A ce sujet, le présent tutorial sur le DOM considère que lors de la mise en pratique d'exemples, vous êtes déjà à l'aise avec Javascript, si tel n'était pas le cas, n'hésitez pas de vous rapprocher du tutorial sur l'introduction à JavaScript...
DOM 1, 2 ou 3 ?
Au commencement du web, chaque navigateur utilisait son propre DOM et donc, avant que le W3C ne le standardise, il fallait explorer au travers de JavaScript toute la panoplie des navigateurs, afin de pouvoir communiquer correctement avec tout ou partie du document.
En 98, le W3C publie ses premières recommandations sur le DOM de niveau 1, qui posait les bases de la représentation d'un document XML sous forme d'arbre et de noeuds, incluant la navigation au sein de celui-ci . En 2000, le DOM de niveau 2 apportera entre autre DOM Events, DOM Style et le fameux getElementById().
Enfin, en 2004, le DOM de niveau 3 continue d'apporter de nouvelles spécifications : Load and Save, XPath, etc... vous pouvez consulter le rapport technique du w3c qui relate l'ensemble des recommandations de niveau 1, 2 ou 3.
Les principaux moteurs de rendu utilisés par les navigateurs ont donc évolués vers cette gestion standardisé du DOM. Mais qu'en est il réellement de l'interprétation de chacune des recommandations ? Wikipedia a ouvert un thread à ce sujet. Certains moteurs de rendu publient leur documentation comme c'est le cas pour Gecko DOM Reference.
DOM et/ou Javascript ?
Si le DOM reste une manière de pouvoir explorer et parcourir l'arborescence d'un document, il est nécessaire d'avoir recours à un langage de programmation pour communiquer avec cette arborescence. Le Javascript introduit par Netscape et standardisé par ECMA, appelé l'ECMAScript reste le langage reconnu et interprété par l'ensemble des navigateurs modernes qui fait très bien l'affaire. Il sera donc utilisé pour parcourir le DOM.
D'autres sources sur le DOM et JavasCript
- HTML DOM Tutorial par W3Schools
- Introduction au tutorial simplifié sur le DOM
- W3C DOM Introduction by HowToCreate
- Introduction a DOM Level 1 by QuirksMode
- Introduction en Javascript et au modèle DOM
- Le DOM et Javascript
- W3 school - Tutorial DOM
- W3 school - Tutorial Javascript
- Tutorial sur OpenWeb
- SelfHTML
DOM et Arborescence
Explorons maintenant l'arborescence du document et voyons les relations entre noeuds et attributs.
Le DOM définit l'intégralité d'un document XML ou HTML comme des noeuds imbriqués. Tout élément y est donc considéré comme un noeud. Le document lui même contient un unique noeud HTMLracine, qui contient à son tour deux noeuds, HEAD et BODY, qui contiennent eux mêmes respectivement un certains nombre de noeuds... bref tout n'est qu'une imbrication de noeuds. On y trouve donc des noeuds parents (parentNode) et des noeuds enfants (child).
Bien que cela ne soit pas visible dans l'arborescence, le texte est contenu dans un noeud, un noeud de type texte. Ainsi, si l'on regarde l'arborescence ci-contre, nous avons la balise BODY qui contient entre autre une balise A. Cette balise A contient du texte, et donc ce texte est en fait contenu dans un noeud de type texte. Donc nous avons un noeud A qui contient un noeud de type texte qui contient le texte.
Les attributs sont également des noeuds, les commentaires aussi sont des noeuds. Il existe 12 types de noeuds qui sont définis par le w3c, voir le tableau ci-dessous pour le détail.
Grâce au DOM et au javascript il est possible de parcourir l'ensemble des noeuds d'une arborescence et de les modifier, de les supprimer, d'en ajouter... bref, de complètement remanier le document, et bien sûr sans avoir à recharger la page, puisque nous avons à faire à deux technologies clients interprétables par tout navigateur moderne.
Nous aurons l'occasion de manipuler des arborescences tout au long de ce tutorial et pour aller plus loin n'hésitez pas à parcourir le tutorial sur l'introduction à AJAX.
| Element type | NodeType |
|---|---|
| Element | 1 |
| Attribut | 2 |
| Text | 3 |
| Section CDATA | 4 |
| Référence d'entité | 5 |
| Entité | 6 |
| Instruction de traitement | 7 |
| Commentaires | 8 |
| Document | 9 |
| Type de document | 10 |
| Fragment de document | 11 |
| Notation | 12 |
Le DOM HTML n'utilise principalement que 5 types de noeuds, les types 1, 2, 3, 8 , vous aurez plus d'information sur les recommandations du w3c à ce sujet.
Relation entre les noeuds
Le premier noeud du document HTML, la balise HTML, est appelé élément racine ou root, cet élément est unique est contient l'ensemble des autres noeuds de l'arborescence. Chaque noeud issus de cette arborescence, possède un élément parent unique et peut contenir à son tour de 0 à n autres noeuds. Tous ces noeuds sont alors appelés des enfants ou children. Tous les noeuds d'un même niveau sont appelés des frères ou sibling. Enfin, un noeud qui ne contient pas d'autre noeud est appelé une feuille ou leaf.
Dans le fragment de code ci-contre, les balises h2, P et A sont des leafs et également sont sibling avec DIV, puisque tous sont issus du même noeud parent BODY. Le noeud DIV à son tour, contient trois autres noeuds h2, h3 et P qui sont à la fois leaf et sibling.
Langage de programmation
Afin de pleinement tirer partie des possibilités de navigation qu'offre le DOM, il faut utiliser un langage de programmation. Du fait de l'environnement des pages HTML basées principalement au coeur d'un navigateur, le Javascript semble tout à fait indiqué. Mais tout autre langage de programation peut dialoguer avec le DOM.
L'API du DOM propose un ensemble de méthodes et de propriétés qui répondent totalement à nos besoins.
Description de l'API du DOM
Bien que la liste suivante ne soit pas exaustive, elle reprend les principales méthodes et propriétés de l'API du DOM qui permettent de lire, écrire ou manipuler l'arborescence d'un document HTML.
Si vous souhaitez obtenir plus d'informations sur ce sujet, n'hésitez pas à vous rapprocher des recommandations du w3c qui listent l'ensemble des méthodes et propriétés disponibles... attention toutefois, à vous assurer que les navigateurs cibles de votre production, les aient également implémentées.
Document & récupération
La gestion du document
- le document en question, document
- l'élément racine du document, documentElement
- un raccourci vers la partie body du document, body
Bien faire la distinction entre document et documentElement. En effet, par défaut les deux contiennent 2 childNodes, mais le premier contient, <!DOCTYPE> et <HTML> alors que le second contient <HEAD> et <BODY>.
Accéder à un ou des noeuds
- atteindre un élément par son id, getElementById(id)
- récupérer tous les éléments par leur name, getElementsByName(name), renvoyé sous forme de tableau.
- récupérer tous les éléments ayant une balise donnée, getElementsByTagName(balise), renvoyé sous forme de tableau
Gestion et information sur les noeuds
Informations sur un noeud
- le type d'un noeud, nodeType
- le nom d'un noeud, nodeName
- la valeur d'un noeud, nodeValue
- la valeur d'une id, nodeId
Parentalité du noeud
- le parent d'un noeud, parentNode
- la liste des noeuds qu'un noeud contient, childNodes, renvoyés sous forme de tableau
- intérogé sur la descendance d'un noeud, hasChildNode(), renvoie true ou false
- la liste des attributs d'un noeud, attributes, renvoyée sous forme de tableau
Naviguer entre les noeuds
- obtenir le premier enfant d'un noeud, firstChild
- obtenir le dernier enfant d'un noeud, lastChild
- atteindre le noeud suivant d'un noeud, nextSibling
- atteindre le noeud précédent d'un noeud, previousSibling
Les attributs
accéder et manipuler les attributs
- obtenir la valeur d'un attribut d'un noeud, getAttribute(attribut)
- définir la valeur d'un attribut d'un noeud, setAttribute(attribut, valeur)
- supprimer un attribut d'un noeud, removeAttribute(attribut)
Création et gestion
Créer un élément ou un texte
- créer un noeud, createElement(noeud), ajoute une chaîne de caractère
- créer un noeud de texte, createTextNode(texte), ajoute une chaîne de caractère
- cloner un noeud de l'arborescence, cloneNode(parametre), paramètre est un booléen qui définis sur false permet de renvoyer uniquement le noeud, et sur true renvoie l'arborescence découlant de ce noeud
Insérer ou gérer un noeud
- l'ajout d'un noeud à un noeud appendChild(noeud), ajoute un objet
- la supression d'un noeud, removeChild(noeud)
- l'insertion d'un noeud, insertBefore(noeud), ajoute un objet
- lire ou définir la valeur HTML d'un noeud, innerHTML, attention c'est une propriété pas une fonction.
