Vous êtes ici : Accueil des cours Misfu > Informatique > 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.
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.
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.
Il y a trois niveaux de DOM :
Maintenant regardons les origines et le développement du Document Object Model.
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é.
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.
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.
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']
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.
Pour le reste de cette page, j'ignorerai les liens et les ancres. Ces tableaux (arrays) fonctionnent de la même façon que les images et les formulaires.
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 | | | | | --------------------- | | | ------------------------------------- | -------------------------------------------
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...
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.
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.