Vous 黎es ici : Accueil des cours Misfu> Informatique> Apprendre la programmation> Cours Javascript> DOM niveau 0
Traduction de la page Level 0 DOM r馘ig馥 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駻er une am駘ioration, n'h駸itez pas ? utiliser le forum .
Le Document Object Model (DOM) est le mod鑞e qui d馗rit la fa輟n dont tous les 駘駑ents dans une PAGE HTML, comme les champs d'entr馥, les images, les paragraphes etc., sont li駸 ? la structure la plus haute: le document
lui-m麥e. En appelant l'駘駑ent par son propre nom DOM, nous pouvons influencer celui-ci.
Cette page donne quelques infos g駭駻ale au sujet des divers DOMs puis d馗rit 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 駘駑ents d'acc鑚 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馘er au HTML et en changer ses propri騁駸. Par exemple, quand vous 馗rivez un
script mouseover vous voulez pouvoir vous rendre sur une image de la page et changer les propri騁駸 de src.
Quand vous faites ceci, le navigateur r饌git en changeant l'image sur l'馗ran.
La fonction du Document Object Model est de fournir ce genre d'acc鑚 aux 駘駑ents HTML de votre page. Savoir exactement ? quels 駘駑ents vous pouvez acc馘er, de quelle mani鑽e et ce que vous pouvez v駻itablement changer d駱end du navigateur. Chaque nouvelle version de navigateur vous donne plus de libert? pour acc馘er et changer les 駘駑ents que vous souhaitez modifier.
Il y a trois niveaux de DOM :
Maintenant regardons les origines et le d騅eloppement du Document Object Model.
Le DOM niveau 0 fut invent? par Netscape en m麥e temps que le JavaScript qui fut mis en application la premi鑽e fois sur Netscape 2. Il offre l'acc鑚 ? quelques 駘駑ents HTML, d'une mani鑽e plus importante aux formes et (plus tard) aux images.
Pour des raisons de compatibilit? les navigateurs les plus 騅olu駸, m麥e ceux qui supportent le DOM de niveau 1, restent toujours fid鑞es 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鑽ement avec les nouveaux concepts de DOM, les navigateurs continueront ? l置tiliser.
Pour la m麥e raison Microsoft fut d'abord forc? de copier le DOM de Netscape pour Internet Explorer 3. Ils ont voulu faire d脱xplorer un vrai concurrent pour Netscape et lui faire produire un bon nombre de messages d'erreur ? chaque page contenant du Javascript aurait 騁? strat馮iquement d駸astreux.
Par cons駲uent 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駭om鈩e de mode 騁ait le DHTML ainsi les deux navigateurs ont d? le soutenir. Le DHTML a besoin de l'acc鑚 aux couches, parties s駱ar馥s d'une page qui peut 黎re d駱lac馥 ? travers la page. Pas 騁onnant alors qu弾n raison de leur concurrence croissante, Netscape et Microsoft est tous deux choisis de cr馥r leurs propres DOM propri騁aire pour permettre l誕cc鑚 aux couches et de changer leurs propri騁駸 (leur position sur la page, par exemple). Netscape a cr鳬 le mod鑞e 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馘iaire.
Il y a eu beaucoup de d饕ats au sujet de cette diff駻ence entre les navigateurs. Quand tout ? 騁? 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棚nternet Explorer vise d誕vantage les d騅eloppeur 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段ls soient d駱ass駸.
En attendant W3C avait d騅elopp? les sp馗ifications du DOM niveau 1. Le Document Object Model W3C propos? 騁ait d'abord 馗rit pour des documents XML, mais puisque le HTML est apr鑚 tout une sorte de XML, il pouvait 馮alement servir aux navigateurs.
En outre, le DOM de niveau 1 est une v駻itable avanc馥. Pour la premi鑽e fois, un DOM n弾st pas seulement cens? donner un mod鑞e exact pour la totalit? du document HTML (ou XML), il lui est 馮alement possible de changer le document ? la vol馥, enlever un paragraphe et changer la disposition d'un tableau, par exemple.
Et ceux depuis que Netscape et Microsoft ont particip? aux sp馗ifications 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馥s de se comporter pour un fois raisonnablement, ils ont tous deux d馗id駸 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馗馘ente, Microsoft a d馗id? de continuer le support du document.all
de sorte qu棚nternet 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馗id? d'馗arter compl鑼ement le vieux document.layers DOM de Netscape 4 pour s誕ppuyer seulement sur le DOM de niveau 1.
Voir la page DOM niveau 1 pour plus d'information.
Chaque DOM donne un acc鑚 aux 駘駑ents HTML d置n document. Il attend de vous, le programmeur web, que vous appeliez correctement chaque 駘駑ent HTML par son nom. Si vous proc馘ez ainsi, vous pouvez influencer l'駘駑ent ( ressortir un peu d段nformation 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鑚.
Chaque nom d'駘駑ent commence par document.. Tous les 駘駑ents HTML sont ? l段nt駻ieur du document d'une mani鑽e ou d置ne autre. Au niveau des DOM les plus haut la relation de l'駘駑ent avec le document peut devenir tr鑚 complexe. Par exemple, pour acc馘er ? 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段nt駻ieur il donne l'acc鑚
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駸, 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麥e fa輟n que les images et les formulaires.
Quand le navigateur conclut qu'une page HTML a 騁? compl鑼ement charg?, il commence ? faire des tableaux pour vous. Il cr馥 le tableau
document.images[] et met toutes les images de la page ? l段nt駻ieur, il cr馥 le tableau
document.forms[] et met tous les formulaires de la page ? l段nt駻ieur etc...
Ceci signifie que vous avez maintenant acc鑚 ? 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 黎re fait de deux mani鑽es: par un nom ou par un nombre.
Supposez que vous avez ce document HTML :
------------------------------------------- | document | | -------- ------------------- | | |img | | second image | | | -------- | | | | ------------------- | | ------------------------------------- | | | form | | | | --------------------- | | | | | address | | | | | --------------------- | | | ------------------------------------- | -------------------------------------------
La premi鑽e image a NAME="thefirst", la seconde a NAME="thesecond". On acc鐡e ? la premi鑽e 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 黎es pr黎.
Le deuxi鑪e appel utilise un nombre. Chaque image obtient un num駻o dans le tableau
document.images, par ordre d誕pparence dans le code source. Ainsi la premi鑽e image d置ne page est
document.images[0]
la seconde est document.images[1] etc...
Il en va de m麥e 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駭駻alement vous ne voulez pas seulement y acc馘er, mais vous souhaitez pouvoir atteindre un champ sp馗ifique de celui-ci. Aucun probl鑪e, parce que pour chaque formulaire le navigateur cr馥 automatiquement le tableau
document.forms[].elements[]
qui contient tous les 駘駑ents du formulaire.
Le formulaire ci-dessus contient en tant que premier 駘駑ent
<input name="address">. Vous pouvez y acc馘er 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鑼ement interchangeables, il est permis d弾n utiliser un, puis un autre. La m騁hode d誕cc鑚 que vous emploierez d駱end de votre script.
Une fois que vous pouvez correctement acc馘er ? un champ de formulaire ou ? une image par le DOM niveau 0, vous pouvez faire ce que vous voulez. On acc鐡e habituellement aux images pour cr馥r un effet de
mouseover qui change la propri騁? src
d'une image :
document.images['thefirst'].src = 'another_image.gif';
G駭駻alement vous souhaitez acc馘er aux formulaires pour contr?ler ce qu'un utilisateur a saisie. Par exemple pour lire ce que l'utilisateur a compl騁? vous devez d誕bord v駻ifiez la valeur de value value:
x = document.forms[0].elements[0].value;
Puis v駻ifier x pour tout ce qui est n馗essaire. Voyez
l'introduction aux formulaires pour des d騁ails sur la fa輟n dont acc馘er aux champs sp馗ifiques (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馘iaire.