Vous êtes ici : Accueil des cours Misfu > Informatique > Apprendre la programmation > Cours Javascript > Les DOM Intermédiaires
Traduction de la page Intermediate DOMs rédigée par Peter-Paul Koch et traduite par Christophe bruggeman
Attention : Cette page est ancienne .
Le Modèle Objet de Document (DOM) est le modèle qui décrit comment sont les éléments dans une page HTML, comme les champs d'entrée, les images, les paragraphes etc…, qui sont tous liés à la structure la plus élevé: le
document lui-même. En appelant l'élément par son propre nom DOM, nous pouvons l’influencer.
Cette page traite des deux DOM intermédiaire et un peu du DOM niveau 1. Le but est de vous enseigner comment écrire du DHTML compatible avec tous les navigateurs.
Pour avoir des informations générales et un peut d’histoire sur les DOM et le DOM niveau 1, voir la page DOM niveau 0 Pour le W3C DOM, voir la page DOM niveau 1.
Tout d'abord, je parlerai beaucoup des DOM avancés et intermédiaire. Mes définitions sont :
document.layers)
et Microsoft pour (document.all).
Sur cette page je donne d’abord les quelques principes généraux des DOM avancés, puis je décris les trois DOM avancés dans la mesure où ils sont reliés au DHTML :
Je ne pense pas rechercher un jour les aspects non-DHTML des deux DOM intermédiaires. Ils sont sur la sortie et comparé au DOM niveau 1 ils sont trop restrictifs pour avoir beaucoup d'intérêt.
Là où le DOM niveau 0 a seulement permis d'accéder à un nombre limité d'éléments de HTML, sur les navigateurs de version 4 les fabricants de navigateurs ont essayé de rendre le DOM plus générique, afin de permettre un accès à tous les éléments sur une page HTML et nous donner à nous les programmeurs web une manière de jouer avec leurs propriétés. Tout ne fonctionne pas dans tous les navigateurs, mais le progrès est accompli.
La raison de fournir les DOM avancés c’est de pouvoir rendre le DHTML
possible: le changement des feuilles de style par le Javascript. Soudainement les navigateurs ont permis d'accéder à tous les éléments influençables sur une page. Savoir exactement quels éléments peuvent être influencés, dépend du navigateur. Netscape 4 permet seulement d’influencer des layers(couches),
alors que Explorer 4 permet d’influencer beaucoup plus d'éléments HTML.
C'était la naissance des DOM avancés Tout d’abord Netscape et Microsoft avaient leurs propre DOM, respectivement
document.layers et document.all; J'appelle ces derniers les DOM intermédiaires. Ensuite est venu le DOM niveau 1, mis en application dans Mozilla et explorer 5. Le DOM niveau 1 peut faire beaucoup plus que du DHTML, mais le sujet de cette page s’arrête au DHTML.
Prenons l'exemple de la page Introduction au DHTML :
nous voulons déplacer un élément à une position de 200 Pixels du côté gauche de l'écran. Dans cet exemple l'élément qui doit être accédé est <DIV ID="tobechanged">.
Par le DOM ce n'est pas un problème. le document a une sorte de ‘sous-document' traitant avec l'objet
tobechanged et sa propriété left. Si vous y accédez et changez correctement
tobechanged.left, l'objet tobechanged sur l'écran se déplace à la position désirée à 200 Pixels de la gauche.
Le problème, bien sûr, c’est qu'il y a trois DOM avancés différent et que l'objet tobechanged
a un nom différent dans chacun. Ainsi votre script doit traiter chacun des trois DOM pour créer un véritable effet compatible sur tous les navigateurs. Ce n'est pas extrêmement difficile, c’est juste un travail très précis.
Soutenu par: Mozilla, Explorer 5+, Opera 5+, Konqueror, Safari, iCab, Ice, OmniWeb 4.5
Depuis la version 5 des navigateurs, le DOM utilisé est le plus avancé et le plus susceptible de rester en place sur les futures versions de navigateur, je le décris d'abord.
Ce DOM donne au script l'occasion d'obtenir n élément et d'exécuter la magie du DHTML dessus. Pour obtenir le <DIV> dans l'exemple, nous faisons:
document.getElementById('tobechanged')
Maintenant nous avons l'élément par ID, qui naturellement est tobechanged.
Quand nous voulons changer left à 200 Pixels, nous disons
document.getElementById('tobechanged').style.left = 200;
et la magie s’opère.
Le nouveau DOM a beaucoup plus de possibilités. Voyez la page DOM niveau 1 pour plus d'information.
Soutenu par: Explorer 4+, Opera 6+, iCab, Ice, Omniweb 4.2-
Le DOM d’Internet Explorer est assez semblable. Dans Internet Explorer 4+, pour faire bouger le DIV dans sa nouvelle position, nous faisons l'une ou l'autre de ces deux choses :
document.all['tobechanged'].style.left = 200; document.all.tobechanged.style.left = 200;
Comme vous le voyez, le document.all dans Internet Explorer 4 donne l'accès aux éléments. Vous devez encore écrire quelques lignes de code spécifique à l'explorer 4, mais vous avez seulement besoin de copier le script version 5 et changer getElementById('')
par all[''].
Pour fournir une compatibilité avec les versions précédentes, Microsoft a également inclus ce vieux DOM dans l'explorer 5. Si vous faites un script seulement pour Internet Explorer 4 et 5, l’utilisation de
document.all sera suffisant.
Ce DOM, a également beaucoup plus de possibilités. Cependant, Microsoft ayant enlevé toutes les références au
document.all de MSDN,
ainsi je ne peux que les deviner. Pour rendre les choses plus complexes, Microsoft se réfère maintenant au DOM niveau 1 comme 'Modèle Objet de Document’ et au DOM document.all comme le 'Modèle Objet du DHTML' (DHTML Object Model).
Soutenu par: Netscape 4, Ice, Escape, Omniweb 4.2-
Maintenant nous arrivons à la partie sale. Le DOM de Netscape 4 est considérablement différent des deux autres. Déjà qu’il est théoriquement incertain, mais il est également bugger. En fait, même maintenant Netscape pense qu’il n’est pas bon car dans un mouvement sans précédent ils ont vidé entièrement le DOM de Netscape 4 et ils l'ont remplacé par le nouveau DOM de Mozilla, de ce fait ils ont sacrifié la compatibilité avec les versions précédentes pour reprendre sur de bonnes bases.
Netscape 4 emploie des couches (layers) comme concept principal pour son DOM. Fondamentalement les couches permettent d’obtenir un accès aux éléments, comme leurs contreparties dans les autres navigateurs, mais il y en à aussi quelques spéciales:
<LAYER>. Puisqu'il n'est pas soutenu par les autres navigateurs (même pas sur Mozilla), je vous conseille de vous en éloigner et d'utiliser <DIV>
à la place.position à l’intérieur, en plus de ID qui est obligatoire dans tous les navigateurs.document.layers[] contient tout ce qui est à l'intérieur d'une couche, comme les images, les formes etc... Ceci signifie que, contrairement aux autres DOM, vous devez d'abord accéder à la bonne couche avant d'accéder à une image, à un formulaire ou à toute autre couche placé à l'intérieur.Notre exemple, est simple. Si nous employons l'une ou l'autre de ces deux lignes
document.layers['tobechanged'].left = 200; document.tobechanged.left = 200;
nous obtenons le même effet qu’avec les autres navigateurs.
Indépendamment du fait de permettre un accès à la couche elle-même et aux éléments HTML situé à l'intérieur, ce DOM n'a pas un grand nombre de possibilités. C'est le plus mauvais DOM et je ne m’en occupe plus depuis qu'il est sur la sortie.
Une des plus mauvaises choses du DOM document.layers est que Netscape 4 voit chaque couche comme un document séparé. Les éléments HTML à l'intérieur d'une couche ne peuvent pas être consultés normalement à partir du document, vous devez d’abord accéder à la couche.
Prenons cet exemple, avec notre DIV avec ID="tobechanged "à l'intérieur d'un autre DIV avec une déclaration
position
dans la feuille de style:
<DIV ID="stuff"> <DIV ID="tobechanged"><IMG NAME="testimage"></DIV> </DIV>
Pour atteindre la couche tobechanged, le code pour les autres navigateurs devrait toujours fonctionner. Ils regardent seulement
ID et ils peuvent toujours accéder à l'élément de la manière décrite ci-dessus.
Mais Netscape 4 ne peut pas trouver document.tobechanged et produit des messages d'erreur. La couche tobechanged
n'est pas contenue par document mais par document.stuff.document!
Ainsi le code de Netscape 4 sera un de ceux-ci:
document.stuff.document.tobechanged.left = 200; document.layers['stuff'].document.layers['tobechanged'].left = 200;
J'ai découvert par la manière forte qu'il est parfois nécessaire de mettre window avant le premier document
dans Netscape 4 sur Mac.
Que diriez-vous de l'image NAME="testimage"? Dans Netscape 4 le bon vieux
DOM niveau 0 appelle
document.images['testimage']
ne fonctionne pas, parce que l'image est non à l'intérieur du document mais à l'intérieur de la couche. Les appels corrects sont :
document.layers['stuff'].document.images['testimage'] document.stuff.document.images['testimage']
Si vous voulez finir la Trilogie du DOM, rendez-vous sur la page DOM niveau 1 page.