Cours de JavaScript - Premiers pas dans le DOM

version 1.55, dernière mise à jour le 8 octobre 2015.

   

Table des matières (TdM)

  1. I. Introduction
    1. Qu'est-ce que le DOM?
    2. Conception de l'arborescence
      1. Qu'est-ce qu'un nœud?
      2. Un premier exemple
      3. Un deuxième exemple, plus complexe
    3. DOM et JavaScript
  1. II. Accès aux éléments et attributs
    1. Accès direct
      1. Accès aux éléments à partir de l'ensemble du document
      2. Exercice : Méthodes getElementById, getElementsByName et getElementsByTagName
      3. Exercice : Petite récréation : réalisation d'une horloge
      4. Accès aux nœuds à partir d'un élément quelconque d'un document
    2. Accès relatif
      1. Introduction
      2. Accès aux attributs
      3. Accès aux nœuds enfants
      4. Exercice : Accès aux enfants
      5. Exercice : Manipulation des styles des enfants
      6. Accès aux nœuds-frères
      7. Accès aux nœuds ancêtres
    3. Accès par les collections
  1. III. Avoir des informations sur les nœuds
    1. Obtenir des informations sur la nature d'un nœud
    2. Obtenir des informations sur le contenu d'un nœud

Retour au menu

Contenu du cours

I. Introduction

1. Qu'est-ce que le DOM?

Le Modèle Objet de Document, ou DOM, Document Object Model est un outil permettant l'accès aux documents HTML et XML. Il permet deux choses au développeur :

Il s'agit donc essentiellement d'un moyen de lier une page Web, par exemple, à un langage de programmation ou de script.

Il est à remarquer que le DOM ne désigne pas une application particulière, ou bien un produit spécifique ou une présentation propriétaire d'une page Web ou, plus généralement, à un document écrit dans un langage de balisage (comme XML par exemple). Il s'agit d'une interface qui permet de standardiser les moyens d'accès à un document balisé, notamment une page Web. Toutes les propriétés et méthodes ainsi que tous les événements disponibles pour le développeur pour manipuler et créer des pages dynamiques sont organisés sous forme de hiérarchies d'objets. Le présent cours va donner les bases permettant d'aborder ce riche domaine.

Il existe maintenant des bibliothèques de scripts comme jQuery, Prototype, MooTools ou dōjō, qui offrent des solutions « clé en main » pour lé développement d'interfaces évoluées. Néanmoins, pour les exploiter au mieux, il est souvent nécessaire d'analyser leur code.

>Retour à la TdM

2. Conception de l'arborescence

a. Qu'est-ce qu'un nœud?

Un langage de marquage comme HTML ou tout autre langage basé sur XML peut être schématisé comme une arborescence hiérarchisée. Les différentes composantes d'une telle arborescence sont désignés comme étant des nœuds. L'objet central du modèle DOM est pour cette raison l'objet node (node = nœud). Il existe différents types de nœuds. Dans un document HTML ordinaire existent dans tous les cas trois types de nœud importants qu'il nous faut distinguer : les nœuds-élément, les nœuds-attribut, et les nœuds-texte.

b. Un premier exemple

Pour comprendre, examinons la construction HTML simple suivante :

<h1 class="centre">Bonjour</h1>

Dans cette construction, il y a un nœud-élément, à savoir le nœud-élément de l'élément h1. De plus, il y a un nœud-attribut, à savoir celui de l'attribut align, et enfin il y a ce qu'on appelle des « données en caractères », que l'on trouve à deux endroits : à savoir une fois comme contenu de l'élément h1, et une fois pour l'affectation de valeur à l'attribut class. Ces données en caractères représentent elles-mêmes des nœuds, à savoir des nœuds texte (pour plus de détails, il est nécessaire de se reporter à la définition des éléments et attributs dans un cours de XML ).

c. Un deuxième exemple, plus complexe

Un autre exemple de construction peut aider à mieux comprendre :

<h1 class="centre">Bonjour <i>tout le monde</i>&nbsp;!</h1>

Dans cet exemple est ajouté le marquage en italique du groupe de mots « tout le monde ». Il est important de comprendre maintenant à quoi ressemble la hiérarchie des nœuds.

L'élément h1 a d'après les règles du DOM, trois nœuds enfants et un nœud associé : les nœuds enfants sont le nœud texte avec le mot « Bonjour » suivi d'un espace, le nœud élément de l'élément i, enfin le nœud texte constitué de la chaîne de caractères "&nbsp;!". L'attribut class dans la balise ouvrante <h1> n'est pas par contre un nœud enfant mais un nœud associé. Le nœud attribut a toutefois lui-même un nœud enfant à savoir la valeur affectée (centre). Même le nœud de type élément i a, à son tour, un nœud enfant, à savoir le nœud de type texte de son contenu de caractères, donc les mots « tout le monde ».

Tous les nœuds de cette arborescence sont accessibles et manipulables -y compris les propriétés des feuilles de style.

>Retour à la TdM

3. DOM et JavaScript

Nous allons dans la suite de ce cours nous limiter à des exemples codés en JavaScript. Plus précisément, nous allons écrire des scripts en JavaScript, qui utiliseront le DOM pour manipuler dynamiquement les pages où ils se trouvent. Le DOM n'est pas un langage de programmation, mais sans lui, le JavaScript ne pourrait avoir aucun modèle pour appréhender la page Web. Par le passé, des méthodes et objets propriétaires ont été utilisés, tant par Netscape qu'Internet Explorer, amenant à des « bricolages » de code dès lors que l'on voulait s'assurer qu'un effet DHTML était accepté par les deux familles de navigateurs.

À l'heure actuelle, il n'est heureusement plus nécessaire de passer par des scripts de détection de navigateur. Des solutions bien plus efficaces sont fournies par des détections fondées non plus sur l'identification du navigateur, mais sur la vérification du support ou non des méthodes nécessaires pour l'utilisation d'un script.

>Retour à la TdM

II. Accès aux éléments et attributs

1. Accès direct

a. Accès aux éléments à partir de l'ensemble du document

L'objet document est un objet important, qui représente l'ensemble de l'arborescence du document analysé. Il possède de nombreuses propriétés et méthodes. Cinq de ces dernières permettent de « pointer » directement un ou plusieurs éléments dans le document.

Un exemple montre comment utiliser les méthodes getElementById, getElementByName et getElementsByTagName .

On peut également accéder aux divers éléments d'un document par leur numéro d'ordre dans ce dernier. Par exemple, les collections document.forms et document.images permettent d'accéder aux divers éléments de formulaires et images du document. Cette méthode présente cependant l'inconvénient de fortement dépendre d'une connaissance a priori du nombre d'éléments dans la page ; pour peu que par exemple le nombre d'images change, la numérotation des éléments du tableau doit être revue si l'on veut pouvoir accéder à une image en particulier.

Exercice 1. Méthodes getElementById, getElementsByName et getElementsByTagName

Énoncé
Correction

Exercice 2. Petite récréation : réalisation d'une horloge

Énoncé
Correction
b. Accès aux nœuds à partir d'un élément quelconque d'un document

Il existe aussi des méthodes qui, à partir d'un élément donné, permettent d'accéder à certains de ses descendants :

>Retour à la TdM

2. Accès relatif

a. Introduction

Les méthodes précédentes demandent de connaître précisément soit l'identifiant, soit le nom exact du nœud cherché. Nous allons voir maintenant comment il est possible d'accéder à des collections de nœuds dont on ne connaît pas ces caractéristiques a priori.

Dans toute la suite, elt désignera un élément que l'on aura au préalable identifié (par exemple par une méthode getElementById).

b. Accès aux attributs

Contrairement à la méthode getAttribute(), qui permet de retourner la valeur d'un attribut de nom donné, la propriété attributes renvoie à la collection complète des attributs d'un élément. Par exemple, si elt désigne l'élément img suivant, cette méthode renverra une liste constituée des nœuds src, alt, width et height (dans cet ordre) :.

<img src="oiseau.gif" alt="Un oiseau sur un arbre" width="45" height="60">

c. Accès aux nœuds enfants

On peut accéder très facilement à la liste des nœuds-enfants d'un élément donné. Pour cela, trois propriétés existent.

Exercice 1. Accès aux enfants

Énoncé
Correction

Exercice 2. Manipulation des styles des enfants

Énoncé
Correction
d. Accès aux nœuds-frères

Le nœud courant peut avoir des frères. On accède au frère précédent à l'aide de la propriété previousSibling, et au nœud suivant par la propriété nextSibling.

e. Accès aux nœuds ancêtres

On peut enfin remonter d'un cran dans la hiérarchie des nœuds avec la propriété parentNode, et revenir à l'élément-racine d'un document (dans le cas d'un document HTML, il s'agit bien sûr de html), avec la propriété documentElement.

>Retour à la TdM

3. Accès par les collections

Quatre collections donnent accès à différents éléments du document :

>Retour à la TdM

III. Avoir des informations sur les nœuds

1. Obtenir des informations sur la nature d'un nœud

Deux propriétés permettent d'obtenir des informations sur la nature d'un nœud déterminé : nodeName et nodeType.

>Retour à la TdM

2. Obtenir des informations sur le contenu d'un nœud

Deux méthodes renvoient des booléens permettant de déterminer si un nœud donné possède des enfants, et/ou des attributs. Ces méthodes, aux noms explicites, sont respectivement hasChildNodes() et hasAttributes().

>Retour à la TdM

Historique de ce document

Conditions d'utilisation et licence

Creative Commons License
Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu