Le DOM et JavaScript

  • Raccourci de la révision : Le_DOM_et_JavaScript
  • Titre de la révision : Le DOM et JavaScript
  • ID de la révision : 186261
  • Créé :
  • Créateur : Samy
  • Version actuelle ? Non
  • Commentaire /* Le Document Object Model, un ensemble d'interfaces indépendant de tout langage */

Contenu de la révision

Le contexte

Les effets visuels comme le déplacement de calques au sein de la page, l'affichage ou non de certaines sections, les menus déroulants, etc. sont souvent appelés « DHTML » ou « Dynamic HTML ». Certains mettent en doute l'utilité réelle de ces technologies dans des pages Web qui sont censées fournir du contenu et non des artifices de présentation. Mais le fait est qu'on en voit tous les jours.

Depuis que j'ai commencé à travailler sur ce projet, et que j'ai eu des contacts avec de nombreux webmestres, j'ai été frappé de constater qu'une grande partie de la communauté des concepteurs Web ne sait pas comment leur DHTML fonctionne. La plupart du temps, ils se sont rendus sur un site proposant annuaire de scripts tous faits, et ont juste copié-collé le code dans leur propre page Web. Malheureusement, la plupart de ces sites parlent de « javascript » et « DHTML », mais presque jamais du « DOM ». Il est vrai que, même si le DOM est un concept ancien, il n'est entré dans le jargon du concepteur Web moyen qu'assez récemment.

C'est un grand défi pour un projet comme Mozilla de convaincre les propriétaires de ces sites que cela vaut la peine de coder en utilisant le DOM du W3C, ce qui représente parfois beaucoup de travail et de laisser tomber le support des navigateurs plus anciens. Ce n'est pas facile non plus de rétablir la vérité concernant le support du DOM W3C par les navigateurs. Netscape 6 a été beaucoup critiqué par des développeurs Web habitués à écrire leur « JavaScript » pour Netscape 4 et Internet Explorer à l'aide de document.layers et document.all. Tous les jours, nous essayons d'aider les gens dans les newsgroup, personnellement par courrier électronique ou sur Bugzilla, à rendre leur site aussi conforme que possible. Un des plus gros problèmes que nous avons rencontré est la confusion entre JavaScript, DHTML, et le DOM. Cet article essaie de clarifier les choses et d'expliquer les relations entre ces technologies attrayantes et utiles.

JavaScript, LE langage de scripting du Web

JavaScript est un « langage de scripting objet » à l'origine développé chez Netscape Communications Corp. par Brendan Eich, qui est aujourd'hui l'un des leaders du projet Mozilla. Le moteur JavaScript utilisé par Mozilla est SpiderMonkey, qui respecte la spécification ECMA-262 edition 3. JavaScript est également appelé ECMAScript (mais consultez la page liée pour une explication détaillée).

Contrairement à une conception populaire, JavaScript n'est pas du « Java interprété ». En gros, JavaScript est un langage de scripting dynamique utilisant une construction d'objets basée sur les prototypes. La syntaxe de base est intentionnellement similaire à Java et C++ pour réduire le nombre de nouveaux concepts nécessaires pour apprendre le langage. Ce qui est bien avec JavaScript c'est qu'il est extrêmement facile à apprendre si vous voulez faire de la programmation basique (comme celle qui est nécessaire pour du DHTML simple). Pas de types de variables visibles, des chaînes de caractères très faciles à utiliser, une neutralité totale par rapport à la plateforme, etc. Pour les codeurs avancés, il fonctionne également comme un langage orienté objet et comme un langage procédural.

Vous remarquerez que la plus grande partie de ce paragraphe concernant JavaScript provient de la page JavaScript de Mozilla. Vous pouvez également y trouver la spécification la plus récente de l'ECMA.

Le Document Object Model, un ensemble d'interfaces indépendant de tout langage

Alors que JavaScript est le langage de programmation qui permet d'opérer sur les objets DOM et de les manipuler programmatiquement, le DOM fournira les méthodes et les propriétés nécessaires pour lire, modifier, mettre à jour et supprimer des éléments du document examiné. Par exemple, vous pouvez récupérer la valeur dans d'un champ texte HTML dans une chaîne à l'aide du DOM. Vous pouvez ensuite utiliser l'opérateur « + » de JavaScript pour concaténer cette chaîne avec une autre pour former une phrase. Vous pouvez ensuite utiliser la méthode DOM « alert() » pour afficher cette chaîne dans un dialogue à l'attention de l'utilisateur. Consultez les exemples ci-dessous pour en savoir plus.

Si une page Web était un ensemble d'éléments de meubles suédois, le DOM serait l'illustration du montage et ses outils : les étagères, verrous, clés à molette et tournevis. Il est possible d'écrire des instructions sur la manière d'assembler les éléments et d'utiliser les outils dans un grand nombre de langues, mais vous n'aurez besoin que de celles écrites dans celui que vous comprenez. Le manuel facilite l'assemblage des éléments à l'aide d'instructions écrites (JavaScript) qui font référence à des illustrations des objets (DOM) représentant les objets réels (le moteur de rendu du navigateur). (Merci à Jonathan pour l'analogie)

Qu'est-ce ce cette indépendance du langage a d'important pour le DOM ? Pourquoi le DOM devrait-il être indépendant de tout langage si le seul langage qu'on utilise pour y accéder est le JavaScript ? Eh bien, ce n'est pas tout à fait exact. Par exemple, Mozilla utilise le DOM en interne tant en C++ qu'en JavaScript pour son interface utilisateur. L'éditeur, par exemple, utilise le DOM de manière intensive pour insérer, modifier et supprimer le HTML que vous voyez lorsque vous écrivez une page dans le module Composer. Parmi d'autres implémentations connues du DOM : Perl, Java, ActiveX, Python, et certainement beaucoup d'autres. Cela n'est bien sûr seulement possible que grâce à l'indépendance du DOM vis-à-vis du langage.

Le DOM et JavaScript - Lequel fait quoi ?

Nous arrivons au point principal de cet article : qu'est-ce qui fait quoi ? Dans un script que j'ai ajouté à ma page Web, qu'est-ce qui est le DOM et qu'est-ce qui est du JavaScript ? Regardons un exemple simple de plus près. Celui-ci va rechercher tous les élements <a> dans une liste de nœuds (NodeList) que nous appellerons « anchorTags ». Ensuite, pour chacun de ces élements, il affichera une alerte donnant la valeur de l'attribut « href » de la balise.

Le JavaScript est en bleu, le DOM est en rouge.

var anchorTags = document.getElementsByTagName("a");
for (var i = 0; i < anchorTags.length ; i++)
{
   alert("L'attribut href du " + i + "e élement est : " + anchorTags[i].href + "\n");
}

Explications

Ce bout de code montre ce qui est du JavaScript, et ce qui fait partie du DOM.

var anchorTags =
Ceci va créer une variable JavaScript appelée « anchorTags ».
document.getElementsByTagName("a")
L'interface Document est la première à être définie dans la spécification DOM Level 1 Core, et document est un objet hôte implémentant cette interface. Cet objet document contient tout ce qui figure dans votre page.
Le DOM définit la méthode getElementsByTagName() de l'interface Document. Elle renvoie une NodeList (une sort de tableau spécifique au DOM contenant des nœuds) de toutes les balises correspondant au paramètre passé à la fonction, dans l'ordre dans lequel elles apparaissent dans le document source. La variable anchorTags est donc maintenant une NodeList.
;
Le point-virgule est l'indication basique de fin de ligne de JavaScript.
for (var i = 0; i <
Une boucle for typique dans un langage de programmation. Celle-ci permet de parcourir chacun des nœuds figurant dans la liste anchorTags. Notez la déclaration de la variable « i ». C'est également du JavaScript.
anchorTags.length
Le DOM définit la propriété length de l'interface NodeList. Elle renvoie un entier qui est le nombre de nœuds faisant partie de la liste. Notez que les tableaux en JavaScript ont aussi une propriété length.
; i++) {
Incrément unitaire (ajout de 1 à la valeur de la variable) typique en JavaScript.
alert(
alert() est une méthode DOM affichant un dialogue avec le paramètre (chaîne) qui lui est fourni. Notez que celle-ci fait partie de ce que l'on appelle DOM level 0, ou DOM0. DOM0 est un ensemble d'interfaces reconnues par beaucoup de navigateurs, mais qui ne font partie d'aucune spécification du DOM.
"L'attribut href du " + i + "e élément a est : " +
Une chaîne littérale et l'opérateur de concaténation. C'est du JavaScript.
anchorTags{{mediawiki.external('i')}}.href
"href" est une propriété de l'interface HTMLAnchorElement définie dans la spécification DOM Level 1 HTML. Elle renvoie la valeur de l'attribut href de l'élément, si applicable.
On utilise également anchorTags{{mediawiki.external('i')}}, la même syntaxe que celle qui est utilisée en JavaScript pour accéder au ie élément d'un tableau. La « manière DOM » indépendante du langage pour accéder à un élément dans une NodeList est d'utiliser la méthode item(), définie sur l'interface NodeList : anchorTags.item(1).href. Mais la plupart des implémentations JavaScript permettent d'utiliser la syntaxe de tableau, plus simple, et c'est ce que la plupart des gens utilisent en réalité.
+ "\n");
Toujours de la concaténation de chaînes. Insère un retour à la ligne à la fin de la chaîne.
}
Fin de la boucle for.

Informations sur le document original

  • Auteur : Fabian Guisset <fguisset at softhome dot net>
  • Informations de copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous une licence Creative Commons
{{ wiki.languages( { "en": "en/The_DOM_and_JavaScript", "ja": "ja/The_DOM_and_JavaScript" } ) }}

Source de la révision

<p>
</p>
<h3 name="Le_contexte"> Le contexte </h3>
<p>Les effets visuels comme le déplacement de calques au sein de la page, l'affichage ou non de certaines sections, les menus déroulants, etc. sont souvent appelés « <a href="fr/DHTML">DHTML</a> » ou « Dynamic HTML ». Certains mettent en doute l'utilité réelle de ces technologies dans des pages Web qui sont censées fournir du contenu et non des artifices de présentation. Mais le fait est qu'on en voit tous les jours.
</p><p>Depuis que j'ai commencé à travailler sur ce projet, et que j'ai eu des contacts avec de nombreux webmestres, j'ai été frappé de constater qu'une grande partie de la communauté des concepteurs Web ne sait pas comment leur DHTML fonctionne. La plupart du temps, ils se sont rendus sur un site proposant annuaire de scripts tous faits, et ont juste copié-collé le code dans leur propre page Web. Malheureusement, la plupart de ces sites parlent de « javascript » et « DHTML », mais presque jamais du « <a href="fr/DOM">DOM</a> ». Il est vrai que, même si le DOM est un concept ancien, il n'est entré dans le jargon du concepteur Web moyen qu'assez récemment.
</p><p>C'est un grand défi pour un projet comme Mozilla de convaincre les propriétaires de ces sites que cela vaut la peine de coder en utilisant le DOM du W3C, ce qui représente parfois beaucoup de travail et de laisser tomber le support des navigateurs plus anciens. Ce n'est pas facile non plus de rétablir la vérité concernant le support du DOM W3C par les navigateurs. Netscape 6 a été beaucoup critiqué par des développeurs Web habitués à écrire leur « JavaScript » pour Netscape 4 et Internet Explorer à l'aide de <code>document.layers</code> et <code>document.all</code>. Tous les jours, nous essayons d'aider les gens dans les newsgroup, personnellement par courrier électronique ou sur Bugzilla, à rendre leur site aussi conforme que possible. Un des plus gros problèmes que nous avons rencontré est la confusion entre <a href="fr/JavaScript">JavaScript</a>, <a href="fr/DHTML">DHTML</a>, et le <a href="fr/DOM">DOM</a>. Cet article essaie de clarifier les choses et d'expliquer les relations entre ces technologies attrayantes et utiles.
</p>
<h3 name="JavaScript.2C_LE_langage_de_scripting_du_Web"> JavaScript, LE langage de scripting du Web </h3>
<p><a href="fr/JavaScript">JavaScript</a> est un « langage de scripting objet » à l'origine développé chez Netscape Communications Corp. par Brendan Eich, qui est aujourd'hui l'un des leaders du projet Mozilla. Le moteur JavaScript utilisé par Mozilla est <a href="fr/SpiderMonkey">SpiderMonkey</a>, qui respecte la spécification ECMA-262 edition 3. JavaScript est également appelé <a href="fr/ECMAScript">ECMAScript</a> (mais consultez la page liée pour une explication détaillée).
</p><p>Contrairement à une conception populaire, JavaScript n'est pas du « Java interprété ». En gros, JavaScript est un langage de scripting dynamique utilisant une construction d'objets basée sur les prototypes.  La syntaxe de base est intentionnellement similaire à Java et C++ pour réduire le nombre de nouveaux concepts nécessaires pour apprendre le langage. Ce qui est bien avec JavaScript c'est qu'il est extrêmement facile à apprendre si vous voulez faire de la programmation basique (comme celle qui est nécessaire pour du DHTML simple). Pas de types de variables visibles, des chaînes de caractères très faciles à utiliser, une neutralité totale par rapport à la plateforme, etc. Pour les codeurs avancés, il fonctionne également comme un langage orienté objet et comme un langage procédural.
</p><p>Vous remarquerez que la plus grande partie de ce paragraphe concernant JavaScript provient de la <a class="external" href="http://mozilla.org/js">page JavaScript de Mozilla</a>. Vous pouvez également y trouver <a class="external" href="http://www.mozilla.org/js/language/">la spécification la plus récente de l'ECMA</a>.
</p>
<h3 name="Le_Document_Object_Model.2C_un_ensemble_d.27interfaces_ind.C3.A9pendant_de_tout_langage"> Le Document Object Model, un ensemble d'interfaces indépendant de tout langage </h3>
<p>Alors que JavaScript est le langage de programmation qui permet d'opérer sur les objets DOM et de les manipuler programmatiquement, le DOM fournira les méthodes et les propriétés nécessaires pour lire, modifier, mettre à jour et supprimer des éléments du document examiné. Par exemple, vous pouvez récupérer la valeur dans d'un champ texte HTML dans une chaîne à l'aide du DOM. Vous pouvez ensuite utiliser l'opérateur « + » de JavaScript pour concaténer cette chaîne avec une autre pour former une phrase. Vous pouvez ensuite utiliser la méthode DOM « alert() » pour afficher cette chaîne dans un dialogue à l'attention de l'utilisateur. Consultez les exemples ci-dessous pour en savoir plus.
</p><p>Si une page Web était un ensemble d'éléments de meubles suédois, le DOM serait l'illustration du montage et ses outils : les étagères, verrous, clés à molette et tournevis. Il est possible d'écrire des instructions sur la manière d'assembler les éléments et d'utiliser les outils dans un grand nombre de langues, mais vous n'aurez besoin que de celles écrites dans celui que vous comprenez. Le manuel facilite l'assemblage des éléments à l'aide d'instructions écrites (JavaScript) qui font référence à des illustrations des objets (DOM) représentant les objets réels (le moteur de rendu du navigateur). (Merci à Jonathan pour l'analogie)
</p><p>Qu'est-ce ce cette indépendance du langage a d'important pour le DOM ? Pourquoi le DOM devrait-il être indépendant de tout langage si le seul langage qu'on utilise pour y accéder est le JavaScript ? Eh bien, ce n'est pas tout à fait exact. Par exemple, Mozilla utilise le DOM en interne tant en C++ qu'en JavaScript pour son interface utilisateur. L'éditeur, par exemple, utilise le DOM de manière intensive pour insérer, modifier et supprimer le HTML que vous voyez lorsque vous écrivez une page dans le module Composer. Parmi d'autres implémentations connues du DOM : <a class="external" href="http://users.erols.com/enno/index.html">Perl</a>, <a class="external" href="http://www.docuverse.com/domsdk/index.html">Java</a>, <a class="external" href="http://www.vivid-creations.com/dom/index.htm">ActiveX</a>, <a class="external" href="http://fourthought.com/4Suite/4DOM">Python</a>, et certainement beaucoup d'autres. Cela n'est bien sûr seulement possible que grâce à l'indépendance du DOM vis-à-vis du langage.
</p>
<h3 name="Le_DOM_et_JavaScript_-_Lequel_fait_quoi_.3F"> Le DOM et JavaScript - Lequel fait quoi ? </h3>
<p>Nous arrivons au point principal de cet article : qu'est-ce qui fait quoi ? Dans un script que j'ai ajouté à ma page Web, qu'est-ce qui est le DOM et qu'est-ce qui est du JavaScript ?
Regardons un exemple simple de plus près.
Celui-ci va rechercher tous les élements <span class="plain">&lt;a&gt;</span> dans une liste de nœuds (NodeList) que nous appellerons « <code>anchorTags</code> ». Ensuite, pour chacun de ces élements, il affichera une alerte donnant la valeur de l'attribut « href » de la balise.
</p><p>Le JavaScript est en bleu, le DOM est en rouge.
</p>
<pre class="eval"><span class="highlightblue">var anchorTags = <span class="highlightred">document.getElementsByTagName("a")</span>;
for (var i = 0; i &lt; <span class="highlightred">anchorTags.length</span> ; i++)
{
   <span class="highlightred">alert</span>("L'attribut href du " + i + "e élement est : " + <span class="highlightred">anchorTags[i].href</span> + "\n");
}</span>
</pre>
<h4 name="Explications"> Explications </h4>
<p>Ce bout de code montre ce qui est du JavaScript, et ce qui fait partie du DOM.
</p>
<dl><dt> <span class="highlightblue">var anchorTags =</span>
</dt><dd> Ceci va créer une variable JavaScript appelée « <code>anchorTags</code> ».
</dd><dt> <span class="highlightred">document.getElementsByTagName("a")</span>
</dt><dd> L'interface <code>Document</code> est la première à être définie dans la spécification DOM Level 1 Core, et <code>document</code> est un objet hôte implémentant cette interface. Cet objet document contient tout ce qui figure dans votre page.<br>Le DOM définit la méthode <code>getElementsByTagName()</code> de l'interface <code>Document</code>. Elle renvoie une NodeList (une sort de tableau spécifique au DOM contenant des nœuds) de toutes les balises correspondant au paramètre passé à la fonction, dans l'ordre dans lequel elles apparaissent dans le document source. La variable <code>anchorTags</code> est donc maintenant une NodeList.
</dd><dt> <span class="highlightblue">;</span>
</dt><dd> Le point-virgule est l'indication basique de fin de ligne de JavaScript.
</dd><dt> <span class="highlightblue">for (var i = 0; i &lt;</span>
</dt><dd> Une boucle <code>for</code> typique dans un langage de programmation. Celle-ci permet de parcourir chacun des nœuds figurant dans la liste <code>anchorTags</code>. Notez la déclaration de la variable « <code>i</code> ». C'est également du JavaScript.
</dd><dt> <span class="highlightred">anchorTags.length</span>
</dt><dd> Le DOM définit la propriété <code>length</code> de l'interface <code>NodeList</code>. Elle renvoie un entier qui est le nombre de nœuds faisant partie de la liste. Notez que  les tableaux en JavaScript ont aussi une <a href="fr/R%c3%a9f%c3%a9rence_JavaScript_1.5_Core/Objets_globaux/Array/length">propriété <code>length</code></a>.
</dd><dt> <span class="highlightblue">; i++) {</span>
</dt><dd> Incrément unitaire (ajout de 1 à la valeur de la variable) typique en JavaScript.
</dd><dt> <span class="highlightred">alert(</span>
</dt><dd> <code>alert()</code> est une méthode DOM affichant un dialogue avec le paramètre (chaîne) qui lui est fourni. Notez que celle-ci fait partie de ce que l'on appelle DOM level 0, ou DOM0. DOM0 est un ensemble d'interfaces reconnues par beaucoup de navigateurs, mais qui ne font partie d'aucune spécification du DOM.
</dd><dt> <span class="highlightblue">"L'attribut href du " + i + "e élément a est : " +</span>
</dt><dd> Une chaîne littérale et l'opérateur de concaténation. C'est du JavaScript.
</dd><dt> <span class="highlightred">anchorTags{{mediawiki.external('i')}}.href</span>
</dt><dd> "<code>href</code>" est une propriété de l'interface <code>HTMLAnchorElement</code> définie dans la spécification DOM Level 1 HTML. Elle renvoie la valeur de l'attribut <code>href</code> de l'élément, si applicable.<br>On utilise également <code>anchorTags{{mediawiki.external('i')}}</code>, la même syntaxe que celle qui est utilisée en JavaScript pour accéder au <code>i</code>e élément d'un tableau. La « manière DOM » indépendante du langage pour accéder à un élément dans une NodeList est d'utiliser la méthode <code>item()</code>, définie sur l'interface <code>NodeList</code> : <code>anchorTags.item(1).href</code>. Mais la plupart des implémentations JavaScript permettent d'utiliser la syntaxe de tableau, plus simple, et c'est ce que la plupart des gens utilisent en réalité.
</dd><dt> <span class="highlightblue">+ "\n");</span>
</dt><dd> Toujours de la concaténation de chaînes. Insère un retour à la ligne à la fin de la chaîne.
</dd><dt> <span class="highlightblue">}</span>
</dt><dd> Fin de la boucle <code>for</code>.
</dd></dl>
<div class="originaldocinfo">
<h3 name="Informations_sur_le_document_original"> Informations sur le document original </h3>
<ul><li> Auteur : Fabian Guisset &lt;fguisset at softhome dot net&gt;
</li><li> Informations de copyright : © 1998-2005 by individual mozilla.org contributors ; contenu disponible sous une <a class="external" href="http://www.mozilla.org/foundation/licensing/website-content.html">licence Creative Commons</a> </li></ul></div>

{{ wiki.languages( { "en": "en/The_DOM_and_JavaScript", "ja": "ja/The_DOM_and_JavaScript" } ) }}
Revenir à cette révision