Introduction à DOM

Qu'est-ce que DOM? Selon le W3C:

"DOM permet aux programmes et scripts d'accéder et de modifier dynamiquement le contenu, la structure et le style de documents XML ou HTML".

Le programmeur dispose d'objets, qui ont des propriétés, des, méthodes et des évènements qui interfacent le document XML ou HTML.
En résumé:

1. Un ensemble d'objets,
2. un modèle pour la façon dont ces objets peuvent être combinés,
3. et une interface pour y accéder les manipuler.

Histoire de DOM

La première description de l'interface faisait partie de HTML 4 et on peut parler de DOM Level 0 et date de 1997.
L'apparition du HTML dynamique en 1997 sur Netscape et Internet Explorer on donné lieu à une définition DOM connue comme DOM intermédiaire.
Le W3C a été fondé en 1994 pour promouvoir les standards du Web. C'est en 1998 qu'il établit la première spécification de DOM dite Level 1.
DOM Level 2 est apparu en 2000.

DOM XML et HTML

Le coeur de DOM fournit:

1. Les interfaces fondamentaux pour représenter tout document structuré.
2. Des interfaces étendus qui représentent les documents XML.

La version HTML doit implémenter à la fois l'interface XML et une interface étendue pour les documents HTML.

Termes relatifs à DOM

DOM implementation

Programme qui prend un document, XML or HTML, déja parsé, et le met à disposition de l'interface dom.

DOM application

Un programme qui peut accéder le document par l'interface DOM.
Un script à l'intérieur d'une page web est une application DOM.

IDL (Interface Definition Language)

La définition de l'interface pour DOM est écrit dans un langage nommé Object Management Group Interface Definition Language (OMG IDL).
Des portages existent pour ECMAScript, Java, et peuvent être écrits pour tout langages.

Objets et méthodes

L'objet Document

Document est un objet DOM correspondant à la page en cours. Toutefois certaines balises comme <iframe>, <browser> et <tabbrowser> peuvent introduire de nouveaux documents.

Les méthodes et attributs de document:

• getElementById(x). Retourne la balise dont l'ID est x.
• innerHTML. Attribut pour lire ou assigner le contenu d'un ID.
• getElementsByName(x). Retourne la NodeList (liste de noeuds), dont les Nodes (noeuds) sont créés à partir des balises dont la classe (ou nom de balise pour XML) est x.
• item(n). Retourne l'élément en position n dans une NodeList.
• firstChild. Attribut désignant le premier élément enfant dans le Node, lequel est retourné par item(n).
• nextSibling. L'élément suivant. S'utilise après firstChild.

Les méthodes de modification essentielles:

• createElement(type, nom). Crée un élément et retourne un objet Element (un type de Node).
• appendChild(Node). Ajoute un élément à l'instance, en tant que dernier enfant.
• insertBefore(Node, Node).
• removeChild(Node).
• setAttribute(nom, valeur). Ajoute un attribut à l'élément.

Comment utiliser DOM avec JavaScript?

DOM est une API, un ensemble de fonctions reconnues par JavaScript et donc une interface faite d'objets avec leurs attributs et méthodes.

var anchorList = document.getElementsByTagName("a") ; 
for (var i = 0; i < anchorList.length ; i++)
{ 
 alert("href: " + anchorList[i].href + "\n"); 
}

Cet exemple parse une page web pour trouver des liens et les afficher.

• document est un objet défini dans le coeur de dom pour représenter le document.
• getElementsByTagName est une méthode de l'objet qui construit un tableau avec chaque balise correspondant au paramètre, "a" en l'occurrence.
• href est une propriété du DOM HTML.
• anchorList est une variable déclarée.

DOM et SAX (Simple Api for XML)

DOM et sax sont deux moyens de parser un document XML et en utiliser le contenu. DOM est le plus simple, le plus intuitif. SAX est plus rapide et consomme moins de mémoire.

• DOM charge le document en mémoire sous forme d'arborescence et permet au programmeur d'appliquer des fonctions sur les éléments de l'arbre.
• Sax est orienté évènements. Il associe des méthodes aux balises, elles sont activées quand les balises sont atteintes lors de la lecture. Les éléments sont lus en séquence, une seule fois. Il faut fournir son propre modèle de document, alors qu'il en est fourni un avec DOM.

Si vous voulez traiter un document avec des scripts, DOM est plus pratique.

Niveaux de DOM

Il y a plusieurs niveaux dans la spécification DOM

DOM 1
DOM Core Level 1 est la première spécification du standard.. Il permet d'accéder au contenu d'un document XML ou HTML.

DOM 2
DOM Level 2 ajoute de nombreuses méthodes aux interfaces déjà définies dans le niveau 1. Dont getElementById, très utilisée. Le niveau 2 ajoute: des espaces de nom XML, des vues filtrées, des intervalles, des évènements, etc.
HTMLDocument et XMLDocument sont des suppléments propres aux documents de type HTML et XML.

DOM 3
DOM Level 3 ajoute de nouvelles interfaces, de nouveaux types de données et des méthodes aux interfaces de DOM 2.
Une interface de requêtes est attendu ainsi que le chargement et la sauvegarde.
Pour plus de détails de ce que va apporter le niveau 3 voir en références.

Références

• Diverses traductions.
• FAQ DOM au W3C. Devrait répondre à la plupart de vos questions. Sinon essayer la FAQ ici.