Tutoriel DOM

DOM, le modèle objet de document, permet d'interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet.

Cela permet d'accéder individuellement à chaque élément. On verra dans ce tutoriel que l'on peut ainsi modifier chaque élément d'une page, ou créer un page ou une partie grâce au DOM.

Ce tutoriel est basé sur DOM core 2, implémenté par tous les navigateurs.

Comment utiliser DOM?

DOM est une API, un ensemble de fonctions reconnues par JavaScript et donc une interface faite d'objets avec leurs attributs 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 dynamiques 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.

Exemple d'utilisation avec JavaScript

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.

Interfaces DOM 2

Nous décrivons les interfaces et comment les utiliser: liste des attributs, liste des méthodes, accès au contenu, ajouter des éléments (exemple: inclure une autre page), modifier le contenu, supprimer des éléments.

• Structure et hiérarchie des interfaces de DOM Core Level 2.
• Node.
• NodeList.
• Document et HTMLDocument.

Etude de cas

Les objets DOM et leurs propriétés sont suffisantes pour modifier les éléments graphiques d'une page Web.

• Remplacer une image ou changer le fond d'écran.
• Afficher dynamiquement une vidéo par l'utilisation de Node.

Références

• Recommandation DOM 1. Elle spécifie les attributs et méthodes principaux de l'interface DOM.
• Recommandation DOM 2. Par le W3C.
• Spécification DOM 3. Esquisse du niveau 3.

Voir aussi

• Tutoriel JavaScript. Utilisation concrète de DOM.