Vous êtes ici : Accueil des cours Misfu > Apprendre la programmation > Cours Javascript > DOM niveau 0

Traduction de la page Level 0 DOM rédigée par Peter-Paul Koch et traduite par Christophe bruggeman

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.

DOM niveau 0

Le Document Object Model (DOM) est le modèle qui décrit la façon dont tous les éléments dans une PAGE HTML, comme les champs d'entrée, les images, les paragraphes etc., sont liés à la structure la plus haute: le document lui-même. En appelant l'élément par son propre nom DOM, nous pouvons influencer celui-ci.
Cette page donne quelques infos générale au sujet des divers DOMs puis décrit le DOM de niveau 0.

Avant tout une petite introduction sur le Document Object Model, suivi d'un peu d'histoire. Puis nous verrons les éléments d'accès et comment employer le DOM niveau 0.

Document Object Model

Le Document Object Model existe depuis que les navigateurs supportent le Javascript. Depuis Netscape 2, les programmeurs web ont voulu accéder au HTML et en changer ses propriétés. Par exemple, quand vous écrivez un script mouseover vous voulez pouvoir vous rendre sur une image de la page et changer les propriétés de src. Quand vous faites ceci, le navigateur réagit en changeant l'image sur l'écran.

La fonction du Document Object Model est de fournir ce genre d'accès aux éléments HTML de votre page. Savoir exactement à quels éléments vous pouvez accéder, de quelle manière et ce que vous pouvez véritablement changer dépend du navigateur. Chaque nouvelle version de navigateur vous donne plus de liberté pour accéder et changer les éléments que vous souhaitez modifier.

Histoire du DOM

Il y a trois niveaux de DOM :

  1. Le DOM de niveau 0, est supporté par tous les navigateurs depuis Netscape 2.
    Ce DOM est traité plus bas sur cette page.
  2. Les deux DOM intermédiaire, supportés par Netscape 4 et Internet Explorer 4 et 5.
    Ces DOMs sont traités à la page DOM intermédiaire.
  3. Le DOM de niveau 1, ou W3C DOM, est supporté par Mozilla et Explorer 5.
    Ce DOM est traité dans sa propre section.

Maintenant regardons les origines et le développement du Document Object Model.

DOM niveau 0

Le DOM niveau 0 fut inventé par Netscape en même temps que le JavaScript qui fut mis en application la première fois sur Netscape 2. Il offre l'accès à quelques éléments HTML, d'une manière plus importante aux formes et (plus tard) aux images.

Pour des raisons de compatibilité les navigateurs les plus évolués, même ceux qui supportent le DOM de niveau 1, restent toujours fidèles et compatibles au DOM de niveau 0. Ne pas le faire signifieraient que soudainement les scripts les plus communs ne fonctionneraient plus. Ainsi quoique le DOM de niveau 0 ne s'adapte pas entièrement avec les nouveaux concepts de DOM, les navigateurs continueront à l’utiliser.

Pour la même raison Microsoft fut d'abord forcé de copier le DOM de Netscape pour Internet Explorer 3. Ils ont voulu faire d’Explorer un vrai concurrent pour Netscape et lui faire produire un bon nombre de messages d'erreur à chaque page contenant du Javascript aurait été stratégiquement désastreux.

Par conséquent le DOM de niveau 0 est vraiment unifié. Avec les DOM suivant, cette situation a changé.

DOM Intermédiaire

Quand la version 4 des navigateurs est sortie, le phénomène de mode était le DHTML ainsi les deux navigateurs ont dû le soutenir. Le DHTML a besoin de l'accès aux couches, parties séparées d'une page qui peut être déplacée à travers la page. Pas étonnant alors qu’en raison de leur concurrence croissante, Netscape et Microsoft est tous deux choisis de créer leurs propres DOM propriétaire pour permettre l’accès aux couches et de changer leurs propriétés (leur position sur la page, par exemple). Netscape a créé le modèle de couche (the layer model) et le DOM document.layers, tandis que Microsoft employait document.all. Ainsi un script DHTML de cross-browser a besoin des deux DOM intermédiaire.

Il y a eu beaucoup de débats au sujet de cette différence entre les navigateurs. Quand tout à été dit, il en ressort que le DOM de Netscape est le plus compliqué, le plus dur à employer et le plus boguer, tandis que le DOM d’Internet Explorer vise d’avantage les développeur web, relativement faciles à utiliser mais handicapé par un manque de documentation. Personnellement je n'aime ni l'un ni l'autre et je suis heureux qu’ils soient dépassés.

DOM Niveau 1

En attendant W3C avait développé les spécifications du DOM niveau 1. Le Document Object Model W3C proposé était d'abord écrit pour des documents XML, mais puisque le HTML est après tout une sorte de XML, il pouvait également servir aux navigateurs.

En outre, le DOM de niveau 1 est une véritable avancée. Pour la première fois, un DOM n’est pas seulement censé donner un modèle exact pour la totalité du document HTML (ou XML), il lui est également possible de changer le document à la volée, enlever un paragraphe et changer la disposition d'un tableau, par exemple.

Et ceux depuis que Netscape et Microsoft ont participé aux spécifications du nouveau DOM. En effet ces deux vendeurs de navigateur ont voulu apporter un support du XML dans la version 5 de leurs navigateurs et puisque des groupes de pression publics comme le Web Standards Project leurs ont instamment recommandées de se comporter pour un fois raisonnablement, ils ont tous deux décidés de mettre en application le DOM niveau 1.

Naturellement, ceci ne signifie pas que Mozilla et Explorer 5 sont identique. Encore une fois, pour des raisons de compatibilité avec les versions précédente, Microsoft a décidé de continuer le support du document.all de sorte qu’Internet Explorer 5 supporte maintenant deux DOM (trois si vous comptez le DOM de niveau 0).
D'autre part, le noyau de Mozilla est construit par le projet open source Mozilla Project et les chefs de ce projet ont décidé d'écarter complètement le vieux document.layers DOM de Netscape 4 pour s’appuyer seulement sur le DOM de niveau 1.

Voir la page DOM niveau 1 pour plus d'information.

Éléments d'accès

Chaque DOM donne un accès aux éléments HTML d’un document. Il attend de vous, le programmeur web, que vous appeliez correctement chaque élément HTML par son nom. Si vous procédez ainsi, vous pouvez influencer l'élément ( ressortir un peu d’information ou changer sont contenu et sa disposition). Par exemple, si vous voulez influencer une image avec NAME="first" vous devez l'appeler par son propre nom

document.images['first']

et vous avez l'accès.

Chaque nom d'élément commence par document.. Tous les éléments HTML sont à l’intérieur du document d'une manière ou d’une autre. Au niveau des DOM les plus haut la relation de l'élément avec le document peut devenir très complexe. Par exemple, pour accéder à une image 'first' dans une couche 'second' dans Netscape 4, faite

document.layers['second'].document.images['first']

Comment employer le DOM niveau 0

La structure du DOM de niveau 0 est simple. Au haut ce trouve le document et à l’intérieur il donne l'accès aux images, aux formulaires, aux liens et aux ancres (les liens sont <a href>, les ancres sont <a name>). Dans la pratique, les images et les formulaires sont souvent employés, contrairement aux liens et aux ancres.

Quand le navigateur conclut qu'une page HTML a été complètement chargé, il commence à faire des tableaux pour vous. Il crée le tableau document.images[] et met toutes les images de la page à l’intérieur, il crée le tableau document.forms[] et met tous les formulaires de la page à l’intérieur etc...

Ceci signifie que vous avez maintenant accès à tous les formulaires et images, vous devez juste parcourir le tableau à la recherche de l'image ou du formulaire que vous souhaitez modifier. Ceci peut être fait de deux manières: par un nom ou par un nombre.

Supposez que vous avez ce document HTML :

-------------------------------------------
|                document                 |
| --------         -------------------    |
| |img   |         |   second image  |    |
| --------         |                 |    |
|                  -------------------    |
|  -------------------------------------  |
|  |             form                  |  |
|  | ---------------------             |  |
|  | |      address      |             |  |
|  | ---------------------             |  |
|  -------------------------------------  |
-------------------------------------------

document.images

La première image a NAME="thefirst", la seconde a NAME="thesecond". On accède à la première image par l'un ou l'autre de ces deux appels :

document.images['thefirst']
document.images[0]

Et à la seconde par l'un ou l'autre de ces appels :

document.images['thesecond']
document.images[1]

Le premier appel utilise un nom, il suffit simplement de le nommer (entre simple quote (‘ ’), c'est un string!) dans les [] et vous êtes prêt.

Le deuxième appel utilise un nombre. Chaque image obtient un numéro dans le tableau document.images, par ordre d’apparence dans le code source. Ainsi la première image d’une page est document.images[0] la seconde est document.images[1] etc...

document.forms

Il en va de même pour les formulaires. Supposez que le formulaire de la page est pour nom : NAME="contactform", alors vous pouvez l'atteindre par ces deux appels :

document.forms['contactform']
document.forms[0]

Mais dans le cas des formulaires, généralement vous ne voulez pas seulement y accéder, mais vous souhaitez pouvoir atteindre un champ spécifique de celui-ci. Aucun problème, parce que pour chaque formulaire le navigateur crée automatiquement le tableau document.forms[].elements[] qui contient tous les éléments du formulaire.

Le formulaire ci-dessus contient en tant que premier élément <input name="address">. Vous pouvez y accéder par ces quatre appels :

document.forms['contactform'].elements['address']
document.forms['contactform'].elements[0]
document.forms[0].elements['address']
document.forms[0].elements[0]

Ces quatre appels sont complètement interchangeables, il est permis d’en utiliser un, puis un autre. La méthode d’accès que vous emploierez dépend de votre script.

Faire ce que vous avez besoin de faire

Une fois que vous pouvez correctement accéder à un champ de formulaire ou à une image par le DOM niveau 0, vous pouvez faire ce que vous voulez. On accède habituellement aux images pour créer un effet de mouseover qui change la propriété src d'une image :

document.images['thefirst'].src = 'another_image.gif';

Généralement vous souhaitez accéder aux formulaires pour contrôler ce qu'un utilisateur a saisie. Par exemple pour lire ce que l'utilisateur a complété vous devez d’abord vérifiez la valeur de value value:

x = document.forms[0].elements[0].value;

Puis vérifier x pour tout ce qui est nécessaire. Voyez l'introduction aux formulaires pour des détails sur la façon dont accéder aux champs spécifiques (checkboxes, boutons radio etc…).

 

C'est ainsi que le DOM de niveau 0 fonctionne. Si vous voulez continuer la trilogie des DOM, vous devriez lire la page DOM intermédiaire.


Cours JavaScript : Introduction Javascript Ajouter du Javascript Détection d'objet Déclarations Fontions String DOM Booléen DOM intermédiaire Objets This MouseOver Imprimer Détection navigateur