Les bases du DOM

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 quelque technologie que ce soit. Cessons de réinventer la roue….

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 tutoriel, 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 tutoriel sur AJAX. A ce sujet, le présent tutoriel 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 tutoriel 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 nœuds, 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 tutoriel 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
• Tutoriel sur OpenWeb
• SelfHTML

DOM et Arborescence

Explorons maintenant l’arborescence du document et voyons les relations entre nœuds et attributs.

Le DOM définit l’intégralité d’un document XML ou HTML comme des nœuds imbriqués. Tout élément y est donc considéré comme un nœud. Le document lui même contient un unique nœud HTMLracine, qui contient à son tour deux nœuds, HEAD et BODY, qui contiennent eux mêmes respectivement un certains nombre de nœuds… bref tout n’est qu’une imbrication de nœuds. On y trouve donc des nœuds parents (parentNode) et des nœuds enfants (child).

Bien que cela ne soit pas visible dans l’arborescence, le texte est contenu dans un nœud, un nœud 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 nœud de type texte. Donc nous avons un nœud A qui contient un nœud de type texte qui contient le texte.

Les attributs sont également des nœuds, les commentaires aussi sont des nœuds. Il existe 12 types de nœuds 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 nœuds 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 tutoriel et pour aller plus loin n’hésitez pas à parcourir le tutoriel sur l’introduction à AJAX.

Le DOM HTML n’utilise principalement que 5 types de nœuds, les types 1, 2, 3, 8 , vous aurez plus d’information sur les recommandations du w3c à ce sujet.

Relation entre les nœuds

Le premier nœud du document HTML, la balise HTML, est appelé élément racine ou root, cet élément est unique est contient l’ensemble des autres nœuds de l’arborescence.

Chaque nœud issus de cette arborescence, possède un élément parent unique et peut contenir à son tour de 0 à n autres nœuds. Tous ces nœuds sont alors appelés des enfants ou children. Tous les nœuds d’un même niveau sont appelés des frères ou sibling. Enfin, un nœud qui ne contient pas d’autre nœud 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 nœud parent BODY. Le nœud DIV à son tour, contient trois autres nœuds h2, h3 et P qui sont à la fois leaf et sibling.

Aller plus loin

DOM Scripting: Web Design with JavaScript and the Document Object Model

Jeremy Keith

DOM Scripting: Web Design with JavaScript and the Document Object Model gives you everything you need to start using JavaScript and the Document Object Model to enhance your web pages with client-side dynamic effects. Jermey starts off by giving you a basic crash course in JavaScript and the DOM, then move on to provide you with several real world examples built up from scratch including dynamic image galleries and dynamic menus, and show you how to manipulate web page style using the CSS DOM, a...

• Friends of Ed
• Partenaire

DOM Enlightnement

Cody Lindley

Over the past decade, developers have buried the DOM under frameworks that simplify its use. This book brings these tools back into focus, using concepts and code native to modern browsers. You’ll understand the role jQuery plays in DOM scripting, and learn how to use the DOM directly in applications for mobile devices and specific browsers that require low overhead....

• O'reilly
• Partenaire