Mieux comprendre le DOM

Flattr this!

Suite à une question d'un de mes collègues, je me rends compte que certaines choses ne sont pas forcément très claires concernant le DOM.

Le DOM

Tout d'abord, cela signifie Document Object Model. C'est bête à dire mais ça résume beaucoup de chose. Derrière ce terme, nous disposons d'un Modèle d'Objet à utiliser quand on veut travailler sur un Document HTML. Vous me voyez venir là ?

Le rapport avec JavaScript

Contrairement à une croyance très répandue, et c'était le cas du collègue en question, le DOM n'est pas "natif" au JavaScript. C'est d'ailleurs pour ça qu'il existe de nombreuses bibliothèques dans de nombreux langages (PHP, C#, Java, JavaScript, ...) pour manipuler le DOM. Celui-ci se veut être indépendant de tout langage (d'où l'idée de Model).

D'ailleurs, pour être encore plus précis, le DOM est d'autant moins natif que si vous essayez par exemple d'y accéder sous Node (par exemple). Bah euh... pourquoi il y a marqué "Error: ...". Autre exemple, sous JSLint, vous pouvez suggérer la présence d'un document. Soit d'un DOM, ce qui n'est pas obligatoire en JS.

C'est le "contexte du navigateur" qui fait que le DOM est présent sous la variable super globale de la mort que tout le monde connait sous le nom de "document".

Le rapport au XML/HTML

Bon là le rapport est plein et entier puisque c'est ce qui décrit même l'essentiel du "comment manipuler un Document XML ou HTML ?" via un Objet.

Un seul objet en JS ?

Je suppose que comme dans beaucoup d'autres langages "classiques", la réponse est non. Il y a plusieurs objets différents qui ont chacun leur spécificité. On parle de "NodeType". Voyons ça de plus près :

NodeType Objet
1 ELEMENT_NODE
2 ATTRIBUTE_NODE
3 TEXT_NODE
4 CDATA_SECTION_NODE
5 ENTITY_REFERENCE_NODE
6 ENTITY_NODE
7 PROCESSING_INSTRUCTION_NODE
8 COMMENT_NODE
9 DOCUMENT_NODE
10 DOCUMENT_TYPE_NODE
11 DOCUMENT_FRAGMENT_NODE
12 NOTATION_NODE

Traversée

Le terme de Node n'est pas innocent. Comme tout noeud dans une représentation d'arbre peut avoir des parents, des enfants et des "frères et soeurs" (en anglais, vous croiserez le terme "siblings"). Et pour dissiper tout doute, certains de ces noeuds peuvent pointer vers d'autres noeuds ... du même type. Ceux qui trouvent que ça risque de faire un arbre tout bizarre, si les branches fusionnent au lieu de faire des feuilles, ont raison.

Tous ?!

Bon en fait non, il y a toujours un noeud racine qui ne peut avoir de parent, c'est le cas du DOCUMENT_NODE. DOCUMENT_FRAGMENT aussi, mais c'est un cas particulier qui permet de ne représenter qu'un bout de document.

Un autre et dernier dans ce cas, c'est DOM_ENTITY. Il a une particularité celui là, c'est qu'en réalité il est censé être vu comme DOM_NODE, comme une interface et non comme un objet.

DOM_NODE, ça sort d'où ?

Parce qu'il faut toujours qu'il y ait quelque chose avant, il y a DOM_NODE ici. C'est à dire, en théorie, une classe abstraite.

Du coup, pour JS ?

Bon là forcément, quand on code par prototype, on est un peu embêtés, parce que des interfaces, des classes abstraites, on n'a pas. Tant pis. On a donc des objets. Mais vous ne serez certainement jamais amené à y toucher directement.

Par curiosité

Si pour une raison X ou Y, vous avez besoin de jouer avec les NodeTypes, vous pouvez facilement obtenir les infos.

  • monElement.nodeType : renvoie l'identifiant du NodeType (les chiffres de 1 à 12 dans le tableau plus haut) ;
  • monElement.nodeName : renvoie le nom du Node. Sur un HTMLDivElement, vous aurez "DIV".

Documentation du DOM pour JS

Allez donc faire un tour sur ce site, y est proposé une sorte de "JavaDoc" pour le DOM sous JS. Ça peut toujours servir de l'avoir sous le bras 😉

Bonne journée !

Flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans HTML, avec comme mot(s)-clef(s) , , , , , , , . Vous pouvez la mettre en favoris avec ce permalien.
  • http://www.wakanda.org/ Alexandre Morgaut

    Cool le petit cours :-)

    A noter que le DOM XML, aussi appelé DOM Core, est un sous ensemble du DOM HTML auquel on a retiré les API d’objets spécifiques comme HTMLImageElement, HTMLFormElement ou des propriétés au départ spécifique à HTML comme className, dir, ou title.
    Je dis sous-ensemble parce que le DOM a été standardisé par le W3C en partant du « DOM Legacy » (aussi surnommé « DOM level 0 ») qui était celui implémenté avant toute standardisation par les navigateurs.
    Plus d’infos pour les curieux:
    Introduction donnée par le Chairman français du DOM: Philippe le Hégaret
    Références des différentes versions du standard

    Petite astuce pour faire des test plus lisible sur le nodeType dans le code
    au lieu de faire:

    if (obj.nodeType === 9) { // ELEMENT_NODE
    // do something
    }

    vous pouvez écrire

    if (obj.nodeType === obj.ELEMENT_NODE) {
    // do something
    }

    Ces constantes sont en effet disponibles sur tous les objets DOM 😉

Articles liés