Le Document Object Model

Parent Previous Next



Le Document Object Model



Le Document Object Model (abrégé DOM) est une interface de programmation pour les documents XML et HTML.


Une interface de programmation, qu'on appelle aussi une API (pour Application Programming Interface), est un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs programmes ou, dans le cas présent, différents langages. Le terme API reviendra souvent, quel que soit le langage de programmation que vous apprendrez.


Le DOM est donc une API qui s'utilise avec les documents XML et HTML, et qui va nous permettre, via le Javascript, d'accéder au code XML et/ou HTML d'un document. C'est grâce au DOM que nous allons pouvoir modifier des éléments HTML (afficher ou masquer un <div> par exemple), en ajouter, en déplacer ou même en supprimer.


Petite note de vocabulaire : dans un cours sur le HTML, on parlera de balises HTML (une paire de balises en réalité : une balise ouvrante et une balise fermante). Ici, en Javascript, on parlera d'élément HTML, pour la simple raison que chaque paire de balises (ouvrante et fermante) est vue comme un objet. Par commodité, et pour ne pas confondre, on parle donc d'élément HTML.


Petit historique


À l'origine, quand le Javascript a été intégré dans les premiers navigateurs (Internet Explorer et Netscape Navigator), le DOM n'était pas unifié, c'est-à-dire que les deux navigateurs possédaient un DOM différent. Et donc, pour accéder à un élément HTML, la manière de faire différait d'un navigateur à l'autre, ce qui obligeait les développeurs Web à coder différemment en fonction du navigateur. En bref, c'était un peu la jungle.


Le W3C a mis de l'ordre dans tout ça, et a publié une nouvelle spécification que nous appellerons « DOM-1 » (pour DOM Level 1). Cette nouvelle spécification définit clairement ce qu'est le DOM, et surtout comment un document HTML ou XML est schématisé. Depuis lors, un document HTML ou XML est représenté sous la forme d'un arbre, ou plutôt hiérarchiquement. Ainsi, l'élément <html> contient deux éléments enfants :<head> et <body>, qui à leur tour contiennent d'autres éléments enfants.


Ensuite, la spécification DOM-2 a été publiée. La grande nouveauté de cette version 2 est l'introduction de la méthode getElementById() qui permet de récupérer un élément HTML ou XML en connaissant son ID.


L'objet window


Avant de véritablement parler du document, c'est-à-dire de la page Web, nous allons parler de l'objet window. L'objet window est ce qu'on appelle un objet global qui représente la fenêtre du navigateur. C'est à partir de cet objet que le Javascript est exécuté.


Si nous reprenons notre « Hello World! » du début, nous avons :

<!DOCTYPE html>

<html>

  <head>

    <title>Hello World!</title>

  </head>

 

  <body>

 

    <script>

 

      alert('Hello world!');

 

    </script>

 

  </body>

</html>


Contrairement à ce qui a été dit dans ce cours, alert() n'est pas vraiment une fonction. Il s'agit en réalité d'une méthode appartenant à l'objet window. Mais l'objet window est dit implicite, c'est-à-dire qu'il n'y a généralement pas besoin de le spécifier. Ainsi, ces deux instructions produisent le même effet, à savoir ouvrir une boîte de dialogue :


window.alert('Hello world!');

alert('Hello world!');


Puisqu'il n'est pas nécessaire de spécifier l'objet window, on ne le fait généralement pas sauf si cela est nécessaire, par exemple si on manipule des frames.


Ne faites pas de généralisation hâtive : si alert() est une méthode de l'objet window, toutes les fonctions ne font pas nécessairement partie de l'objet window. Ainsi, les fonctions comme isNaN(),parseInt() ou encore parseFloat() ne dépendent pas d'un objet. Ce sont des fonctions globales. Ces dernières sont, cependant, extrêmement rares. Les quelques fonctions citées dans ce paragraphe représentent près de la moitié des fonctions dites « globales », ce qui prouve clairement qu'elles ne sont pas bien nombreuses.


De même, lorsque vous déclarez une variable dans le contexte global de votre script, cette variable deviendra en vérité une propriété de l'objet window. Afin de vous démontrer facilement la chose, regardez donc ceci :

var text = 'Variable globale !';

 

(function() { // On utilise une IEF pour « isoler » du code

 

    var text = 'Variable locale !';

 

    alert(text); // Forcément, la variable locale prend le dessus

 

    alert(window.text); // Mais il est toujours possible d'accéder à la variable globale grâce à l'objet « window »

 

})();


Si vous tentez d'exécuter cet exemple via le site jsfiddle.net vous risquez alors d'obtenir un résultat erroné. Il peut arriver que ce genre de site ne permette pas l'exécution de tous les types de codes, en particulier lorsque vous touchez à window.


Une dernière chose importante qu'il vous faut mémoriser : toute variable non déclarée (donc utilisée sans jamais écrire le mot-clé var) deviendra immédiatement une propriété de l'objet window, et ce, quel que soit l'endroit où vous utilisez cette variable ! Prenons un exemple simple :

(function() { // On utilise une IEF pour « isoler » du code

 

    text = 'Variable accessible !'; // Cette variable n'a jamais été déclarée et pourtant on lui attribue une valeur

 

})();

 

alert(text); // Affiche : « Variable accessible ! »


Notre variable a été utilisée pour la première fois dans une IEF et pourtant nous y avons accès depuis l'espace global ! Alors pourquoi cela fonctionne-t-il de cette manière ? Tout simplement parce que le Javascript va chercher à résoudre le problème que nous lui avons donné : on lui demande d'attribuer une valeur à la variable text, il va donc chercher cette variable mais ne la trouve pas, la seule solution pour résoudre le problème qui lui est donné est alors d'utiliser l'objet window. Ce qui veut dire qu'en écrivant :

text = 'Variable accessible !';


le code sera alors interprété de cette manière si aucune variable accessible n'existe avec ce nom :

window.text = 'Variable accessible !';


Si nous vous montrons cette particularité du Javascript c'est pour vous conseiller de ne pas vous en servir ! Si vous n'utilisez jamais le mot-clé var alors vous allez très vite arriver à de grandes confusions dans votre code (et à de nombreux bugs). Si vous souhaitez déclarer une variable dans l'espace global alors que vous vous trouvez actuellement dans un autre espace (une IEF, par exemple), spécifiez donc explicitement l'objet window. Le reste du temps, pensez bien à écrire le mot-clé var.


Le document


L'objet document est un sous-objet de window, l'un des plus utilisés. Et pour cause, il représente la page Web et plus précisément la balise <html>. C'est grâce à cet élément-là que nous allons pouvoir accéder aux éléments HTML et les modifier. Voyons donc, dans la sous-partie suivante, comment naviguer dans le document.


Créé avec HelpNDoc Personal Edition: Générateur de documentation et EPub gratuit

Site à deux balles