D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.
DOM, cela veut dire : Document : C’est tout simplement la page HTML vue par l’utilisateur. Ne pas confondre avec le fichier HTML qui a été chargé. Objet : C’est le concept informatique d’objet. Il est nommé ainsi par analogie avec les objets du monde réel. Modèle : Représentation reproduisant les caractéristiques et comportements de façon appréhendable par l’ordinateur.
DOM, une interprétation : C’est une représentation sous forme d’objet informatique du code HTML tel qu’il a été compris et affiché par le navigateur. Pouvoir manipuler cette représentation, c’est pouvoir agir sur l’affichage de la page. Ce qui est possible, est au plus ce que permet le langage HTML. Ce qui limite, c’est la qualité du modèle.
L’Objet : L’outil de modélisation La représentation de la page est construite en la décomposant en Objets génériques. C’est une utilisation de la programmation orientée Objet, il est utile de comprendre ce que recouvre le concept d’Objet informatique. Utiliser le DOM, ce n’est pas faire de la programmation orientée Objet. C’est employer le modèle Objet fournit par le navigateur.
Ce qu’est un Objet informatique Le concept d’Objet a été nommé ainsi par analogie avec les objets du monde réel. Un Objet a des : Propriétés : son état statique caractéristique. Ex : Objet téléphone Propriété allumé allumé permet de savoir si le téléphone est allumé, en assignant une valeur à allumé on peut changer son état Méthodes : comportement dynamique, traitements qu’il peut effectuer. Ex: Objet téléphone Méthodes appeler() appeler(0324232) permet d’effectuer un appel
Des notions de programmation Objet La programmation orientée Objet c’est utiliser le concept d’Objet pour structurer les programmes. Un objet en informatique c’est la réunion : De variables (Propriétés) Et de Code (Méthodes) Dans un ensemble cohérent et opaque vu de l’extérieur (Encapsulation) Ex : vous vous moquer de savoir comment fonctionne votre téléphone
Programmation Objet : La généricité Tous les téléphones ont les mêmes fonctionnalités (propriétés, méthodes), il est inutile de les définir pour chacun. On parle de Classe d’Objet, on y définit l’ensemble des propriétés et méthodes de ces objets. Un Objet un_téléphone manipulé par le programme sera une Instance de la Classe téléphone Le téléphone_de_Paul sera représenté par une Instance de la Classe. Il aura la Propriété d’être rouge. Le téléphone_de_Jean sera représenté par une autre Instance de la Classe. Il aura la Propriété d’être vert.
Programmation Objet : tout un monde Il existe d’autres concepts en programmation orientée Objet notamment : L’Héritage : Les téléphones portables et fixes ont beaucoup de points communs, on peut les définir dans la Classe téléphone (Parent). Ce qui est propre au téléphone fixe sera définit dans la Classe téléphone_fixe (Enfant), et ce qui est propre au téléphone mobile sera définit dans la Classe téléphone_mobile (Enfant). Le Polymorphisme : on utilise un téléphone_fixe comme un téléphone_mobile.
Les concepts Objets utiles en JavaScript On se limitera aux Objets fournit par le navigateur : On modifiera ces Objets en lisant ou assignant les valeurs à leurs Propriétés. On utilisera ces objets en appelant leurs Méthodes. Ces Objets seront : Les Objets issus de la page HTML affichée (Par le biais de l’objet document en général). De Nouveaux Objets que l’on aura créés par l’instanciation d’une Classe (l’opérateur new de JavaScript rempli cette fonction)
Exemples d’objets JavaScript : document.write('<h1>dans la page !</h1>'); Appelle la méthode write de l’objet document avec comme paramètre '<h1>dans la page !</h1>' : Action d’écrire dans la page. alert(document.location); Lit la propriété location de l’objet document et l’affiche dans un dialogue (alert) document.location='file:///C:/'; Modifie la page affichée en mettant la valeur 'file:///C:/‘ dans la propriété location de l’objet document
Exemples d’objets JavaScript : Changer une image <HTML> <HEAD> <TITLE>puce_rouge</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <SCRIPT LANGUAGE="JavaScript"> <!— rslt = new Image(); rslt.src = 'images/puce_rouge_01-over.gif' function changeOver() { document.images['puce_rouge_01'].src = 'images/puce_rouge_01-over.gif'; } function changeOut() { document.images['puce_rouge_01'].src = 'images/puce_rouge_01.gif'; } // --> </SCRIPT> </HEAD> <BODY> <A HREF="#" ONMOUSEOVER="changeOver();" ONMOUSEOUT="changeOut();"> <IMG NAME="puce_rouge_01" SRC="images/puce_rouge_01.gif" BORDER="0"></A> </BODY> </HTML>
Exemples d’objets JavaScript : Les Objet de Type Image rslt = new Image(); L’opérateur new crée une Instance de la Classe Image et l’affecte à la variable rslt qui sera ainsi un Objet de Classe(Type) Image. Rq: Image() est ce qu’on appelle un Constructeur.
Exemples d’objets JavaScript : Les Objet de Type Image rslt.src = 'images/puce_rouge_01-over.gif'; On affecte la valeur 'images/puce_rouge_01-over.gif‘ à la propriété src de l’Objet rslt
Exemples d’objets JavaScript : Les Objet de Type Image document.images['puce_rouge_01'].src = 'images/puce_rouge_01-over.gif'; L’Objet document a une propriété images qui est un tableau référençant tous les Objets de Classe(Type) Image de la page
Rq : sur le modèle Objet de JavaScript Image() est ce qu’on appelle un Constructeur Son rôle est d’initialiser l’Objet avant son utilisation. En JavaScript c’est tout simplement une fonction. C’est elle qui définit également la Classe Il n’existe pas de distinction entre Classe et Type car les variables (et Objets) ne sont pas typées. Pour les mêmes raisons le polymorphisme est implicite du fait de l’absence de Type.
Rq : sur le modèle Objet de JavaScript Les Objets sont en fait des tableaux associatifs (dictionnaire) d’où la dualité : notation pointée et adresse entre crochets. Ainsi la notion de Classe est facultative, JavaScript n’est pas un langage Objet. Il ne fait qu’emprunter la notation pointée courante dans un langage Objet. Le seul intérêt est d’utiliser les Objets du navigateur.
Le DOM ne s’est pas fait en un jour L’évolution vers le concept de DOM s’est fait en trois grandes étapes : Les débuts du JavaScript L’apparition des « calques » Le vrai modèle de document
Les débuts du DOM form : formulaire image : image Dés le début JavaScript a incorporé des Objets représentant différents éléments, on retiendra surtout la possibilité de manipuler les éléments : window : la fenêtre du navigateur document : le document affiché form : formulaire image : image Des possibilités limitées définies principalement par leurs simplicités, aucune ne change profondément l’affichage de la page.
Les débuts du DOM : Les collections Avec les premiers navigateurs JavaScript, on n’a accès qu’a un nombre limité d’éléments, les formulaires et les images principalement. On y accède par le biais des collections : Ce sont des Propriétés de l’objet document, qui contiennent un tableau regroupant l’ensemble des éléments HTML du type correspondant document.images[] Toutes les images de la page (balise IMG) document.forms[] Tous les formulaires de la page (balise FORM)
Les collections et l’attribut name Les collections sont un tableau donnant accès à l’ensemble des éléments d’un type donnés. document.images[0] est la première image de la page document.images[1] est la seconde image de la page … En utilisant l’attribut name de la balise, on peut retrouver directement l’élément. Code HTML : <IMG NAME="puce_rouge_01" … > Code JavaScript : document.images['puce_rouge_01']
La guerre des navigateurs Avec la sortie des navigateurs de quatrième génération, Netscape et Microsoft se livrèrent une concurrence féroce. L’enjeu était la domination du marché avec pour argument des pages plus dynamiques, plus attrayantes, le Dynamic HTML. Chacun proposa sa propre solution, totalement incompatible avec celle de l’autre. Netscape : Les Layers Microsoft : DHTML Object Model Aujourd'hui on connaît la fin de l’histoire, Microsoft a gagné.
Netscape : Les Layers (calques) Le modèle choisi par Netscape était très simple, les calques sont considérés un peu comme des documents indépendants (Mais dans le même fichier). Il sont déclarés par la balise <layer> On peut les superposer, déplacer, cacher et redimensionner. On y accède par la collection : document.layers[] On utilise l’attribut id pour nommer les éléments (comme pour name les autres collections)
Netscape : Le perdant Le concept de layer n’était pas très novateur, il offre des possibilités assez limitées. C’est un ajout de plus au code HTML, qui plus est totalement propriétaire. Netscape a été incapable de sortir un navigateur de cinquième génération. Netscape a perdu la guerre commerciale Netscape a placé sa technologie en Open Source pour lui donner un avenir (Mozilla) Les Layers sont tombés dans l’oubli, Mozilla le successeur ne les prend pas en charge.
L’étape intermédiaire du DOM C’est Microsoft qui a promulgué le concept de Modèle Objet de Documents avec IE 4.0 Il a introduit la possibilité de manipuler la quasi-totalité du document. Ainsi que l’exploitation du modèle Objet pour regrouper les propriétés et méthodes communes. Mais il l’a fait de façon propriétaire. Il a été employé le terme de DOM à son sujet, mais aujourd'hui on y fait référence par : DHTML Object Model C’est Internet Explorer 4.0 qui a "inventé" le DHTML
DHTML Object Model Le modèle de IE4 possède beaucoup de similitudes avec le DOM tel qu’il a été standardisé. document.all[] permet d’accéder à l’ensemble du document (tous les éléments HTML). On utilise l’attribut id pour nommer les éléments. Il est possible de changer dynamiquement le contenu de la page. Il n’est supporté que par Microsoft qui le garde pour des raisons de compatibilité ascendante. IE5 supporte assez bien le vrai DOM standard
Le DOM, le vrai ! C’est un standard fixé par le W3C, qui évolue http://www.w3.org/DOM/ Le Modèle Objet de Document est une interface de programmation indépendante de la plateforme et du langage. Elle permet aux programmes et scripts d’accéder dynamiquement et de mettre à jour le contenu, la structure et les styles d’un document. Il a été développé pour permettre la portabilité de scripts JavaScript et de programmes Java d'un navigateur Web à l'autre.
Rapport entre DOM et XML Langage de balisage extensible XML est un méta langage c’est-à-dire qu’il permet de définir des langages. XML utilise le même système de balise que HTML Par exemple : XHTML est la transposition du HTML suivant les spécifications XML. Le but d’XML est de définir un format d’échange d’information aussi universel que le HTML, mais avec une interopérabilité parfaite avec toutes plateformes et langages. Le DOM est un des outils permettant d’employer le XML dans un programme.
Ce que représente le DOM : un document HTML Ce qu’affiche le navigateur <html> <head> <title>Test</title> </head> <body> <h3>Un titre</h3> <p id="para">Un texte <b>en gras</b> </p> </body> </html>
Ce que représente le DOM : une arborescence <html> <head> <title>Test</title> </head> <body> <h3>Un titre</h3> <p id="para">Un texte <b>en gras</b> </p> </body> </html> Ce que comprend le navigateur
Ce que représente le DOM : explication du modèle Le langage HTML est constitué de balises. Une balise ouvrante et une balise fermante forment un élément HTML. Un élément HTML peut contenir d’autre éléments, on les appelle éléments enfants. Il existe un élément particulier l’élément #text Il ne peut pas avoir d’éléments enfants. Il contient simplement du texte littéral. Le DOM modélise tout cela par une arborescence reflétant l’imbrication et les relations parent/enfants
Comment accéder au DOM : La racine de l’arborescence C’est l’Objet document qui est le point d’entrée du DOM Il possède une propriété documentElement qui donne accès à l’élément racine d’un document HTML, l’élément HTML. Pour des raisons de compatibilité il est préférable d’utiliser document.documentElement pour accéder à l’élément HTML. <a href="javascript:alert( document.documentElement.nodeName)">… <a href="javascript:alert( document.nodeName)">…
Comment accéder au DOM : Un ou des éléments particuliers L’Objet document possède des méthodes pour aider à retrouver des éléments HTML <p>texte</p> <p id="para">Un texte <b>en gras</b></p> Sélectionner l’élément ayant un id particulier document.getElementById('para')
Comment accéder au DOM : Un ou des éléments particuliers L’Objet document possède des méthodes pour aider à retrouver des éléments HTML <p>texte</p> <p id="para">Un texte <b>en gras</b></p> Sélectionner tous les éléments ayant un nom de balise données, retourne un tableau: document.getElementsByTagName('p') Ici on appel le 1er : document.getElementsByTagName('p')[0] 1 1
Le modèle Objet du DOM : Structure et éléments Le DOM modélise la structure des éléments du document HTML sous la forme d’une arborescence d’Objets. Les Objets du modèle ont des propriétés et méthodes : Communes pour la structure Distinctes suivant le type d’éléments HTML HEAD BODY H1 P #text
Le modèle Objet du DOM : Le concept de la structure arborescente Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY Parent désigne l’élément dans lequel il est inclus Frère désigne les éléments ayant même parent Enfant désigne les éléments dont il est le parent
Le concept de la structure arborescente Le parent d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour parent HTML En notation Objet : Mon_BODY.parentNode == Mon_HTML
Le concept de la structure arborescente Les enfants d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour enfants : H1 P P En notation Objet : Mon_BODY.childNodes[0] Mon_BODY.childNodes[1] Mon_BODY.childNodes[2]
Le concept de la structure arborescente Le premier enfant d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour premier enfant H1 En notation Objet : Mon_BODY.firstChild == Mon_H1
Le concept de la structure arborescente Le dernier enfant d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour dernier enfant P En notation Objet : Mon_BODY.lastChild == Second_P
Le concept de la structure arborescente Le frère « aîné » d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY a pour frère « aîné » HEAD En notation Objet : Mon_BODY.previousSibiling == Mon_HEAD
Le concept de la structure arborescente Le frère « cadet » d’un noeud Le DOM modélise l’arborescence par le biais de relations parent/enfants. On considère l’élément BODY BODY n’a pas de frère «cadet» En notation Objet : Mon_BODY.nextSibiling == undefine
Le modèle Objet du DOM : Parcourir la structure arborescente ? Les modélisations des relations parent/enfants dans les Objets du DOM permettent de « parcourir » le document. On peut ainsi « atteindre » n’importe quel objet figurant un élément HTML. Malheureusement tous les navigateurs ne donnent pas la même interprétation d’un document HTML. Ils interprètent différemment les éléments « vides ». On préférera l’usage de : document.getElementById(‘un_id'); Mais comprendre le modèle du DOM est indispensable, si on souhaite pouvoir le manipuler.
Le modèle Objet du DOM : Les éléments « vides » Deux documents HTML <html> <head> <title>Test</title> </head> <body><h3>Un titre </h3><p id="para">Un texte <b>en gras</b></p></body></html> <html> <head> <title>Test</title> </head> <body> <h3>Un titre</h3> <p id="para">Un texte <b>en gras</b> </p> </body> </html> Un même affichage
Le modèle Objet du DOM : Les éléments « vides » <html> <head> <title>Test</title> </head> <body> <h3>Un titre</h3> <p id="para">Un texte <b>en gras</b> </p> </body> </html> Beaucoup de nœuds texte sont le résultat d’espaces entre les balises.
Le modèle Objet du DOM : Les éléments « vides » <html> <head> <title>Test</title> </head> <body><h3>Un titre </h3><p id="para">Un texte <b>en gras</b></p></body></html> Il est possible d’éviter les éléments vides, mais cela ne facilite pas la lecture du code HTML. XML a été conçut pour parer à de telles ambiguïtés.
Le modèle Objet du DOM : Modifier la structure arborescente Le concept parent/enfants est également employé pour permettre de modifier le document. C’est ce qui rend le DOM si intéressant, c’est la possibilité de changer intégralement la structure du document. On réalise cela par le biais d’une interface de programmation simple et adaptée, sans réaliser un programme qui « écrive » du HTML Il est inutile de « recharger » la page pour visualiser les changements, ils sont immédiatement répercutés sur l’affichage.
Modifier la structure arborescente Le support d’exemples On utilisera cette page HTML comme support des exemples Elle comporte un bouton pour lancer le code Elle est constituée de divisions imbriquées figurant la structure hiérarchique des éléments, on leur a appliqué un style. Des id ont été placés pour : Notre cible : id="notre_cible" 2nd enfant : id="un_enfant"
Le support d’exemples : La feuille de style Le but est simplement de visualiser aisément la structure du document div { border: 5px solid blue; padding: 5px; margin : 5px; font-size: 30px;}
Le support d’exemples : Le code HTML <body> <input type="button" value="GO , GO , GO ..." onclick="ma_fct()"> <div> le grand père <div>Le frère aîné</div> <div id="notre_cible"> Notre cible <div>1er enfant</div> <div id="un_enfant"> 2nd enfant</div> <div>3iem enfant</div> </div> <div>Le frère cadet</div> </div> </body>
Le support d’exemples : La représentation du DOM
Le support d’exemples : Le code JavaScript Le code JavaScript est appelé par le bouton, il comporte les étapes suivantes : Placer dans des variables des références à des Objets figurant des éléments de la page en se basant sur leurs id : "notre_cible" "un_enfant". Construire de nouveaux éléments et garder dans une variable une référence à leurs Objets. Assembler ces Objets entre eux. Insérer dans le DOM les Objets ainsi construis. Il ne restera qu’à visualiser le résultat.
Le code JavaScript L’appel du code On déclare une fonction dans les entêtes : <script language="JavaScript"> <!-- function ma_fct() { //On place le code içi … } // --> </script> On appelle cette fonction lorsque l’on clique sur le bouton : <input type="button" value="GO , GO , GO ..." onclick="ma_fct()">
Le code JavaScript Obtenir des références sur des éléments On retrouve les éléments par leurs id et l’on place une référence à l’Objet dans une variable. var Notre_Cible = document.getElementById( 'notre_cible'); var Un_Enfant = document.getElementById( 'un_enfant');
Le code JavaScript Construire de nouveaux éléments Il existe deux méthodes de l’Objet document suivant le type d’éléments que l’on veut créer Pour un élément correspondant à une Balise var Mon_Visiteur = document.createElement('div'); La représentation correspondant au DOM Le code HTML qui correspondrait <div></div> L’affichage qu’il donnerait
Le code JavaScript Construire de nouveaux éléments Il existe deux méthodes de l’Objet document suivant le type d’éléments que l’on veut créer Pour un élément recevant du texte var Texte_Mon_Visiteur = document.createTextNode('mon visiteur'); La représentation correspondant au DOM Le code HTML qui correspondrait Mon visiteur L’affichage qu’il donnerait
Le code JavaScript Assembler les Objets entre eux Assembler les Objets c’est définir leurs relations parent/enfants Pour définir que Texte_Mon_Visiteur est un enfant de Mon_Visiteur : Mon_Visiteur.appendChild(Texte_Mon_Visiteur); La représentation correspondant au DOM Le code HTML qui correspondrait <div></div> Mon visiteur Le code HTML qui correspondrait <div> Mon visiteur </div> L’affichage qu’il donnerait
Le code JavaScript Insérer dans le DOM de la page Les éléments que l’on vient de construire n’apparaissent pas dans la page. Il faut les insérer de la même façon qu’on les a assemblés On va placer Mon_Visiteur comme un enfant de Notre_Cible . On utilisera exactement la même méthode.
Le code JavaScript Insérer un élément dans le DOM de la page La variable Notre_Cible référence l’élément qui sera le parent. On va lui ajouter comme enfant. l’élément référencé par Mon_Visiteur Notre_Cible.appendChild( Mon_Visiteur);
Le code JavaScript : Le résultat Il suffit d’un appui sur le bouton pour lancer le code et visualiser le résultat L’affichage est immédiat Chercher l’intrus Je ne vous montre pas le code HTML correspondant a cette affichage car il n’a jamais été écrit, ni par vous ni par le navigateur. On a directement manipulé la structure de la page.
Le code JavaScript : tout le code <html> <head><title>Test</title></head> <style type="text/css"> div { border: 5px solid blue; padding: 5px; margin : 5px; font-size: 30px;} </style> <script language="JavaScript"> <!-- function ma_fct() { var Notre_Cible= document.getElementById('notre_cible'); var Un_Enfant= document.getElementById('un_enfant'); var Mon_Visiteur= document.createElement('div'); var Texte_Mon_Visiteur= document.createTextNode('mon visiteur'); Mon_Visiteur.appendChild( Texte_Mon_Visiteur); Notre_Cible.appendChild(Mon_Visiteur); } // --></script> <body> <input type="button" value="GO , GO , GO ..." onclick="ma_fct()"> <div> le grand père <div>Le frère aîné</div> <div id="notre_cible"> Notre cible <div> 1er enfant</div> <div id="un_enfant"> 2nd enfant</div> <div>3iem enfant</div> </div> <div>Le frère cadet</div> </div> </body> </html>
Le support d’exemples : Variation sur un thème Le modèle DOM offre d’autres possibilités pour modifier le document exemples\ support_exemples\ tous_exemples.html
Le support d’exemples : Variation sur un thème Placer Mon_Visiteur avant Un_Enfant Notre_Cible.insertBefore( Mon_Visiteur,Un_Enfant);
Le support d’exemples : Variation sur un thème Remplace Un_Enfant par Mon_Visiteur Notre_Cible.replaceChild( Mon_Visiteur,Un_Enfant);
Le support d’exemples : Variation sur un thème Place Notre_Cible avant le 1er fils de Notre_Cible Notre_Cible.insertBefore(Mon_Visiteur, Notre_Cible.firstChild); Pour ceux qui n’ont pas suivi le 1er fils est en fait l’élément #text
Le support d’exemples : Variation sur un thème Place Mon_Visiteur avant le 2nd fils de Notre_Cible Notre_Cible.insertBefore( Mon_Visiteur, Notre_Cible.childNodes[1]); Rappel : childNodes est un tableau, les indices commencent à O, donc 1 désigne le 2nd
Le support d’exemples : Variation sur un thème Efface Un_Enfant Notre_Cible.removeChild(Un_Enfant);
Le support d’exemples : Variation sur un thème Efface le dernier enfant de Notre_Cible Notre_Cible.removeChild(Notre_Cible.lastChild); Il est possible qu’il faille appuyer 2 fois, car le dernier élément peut être un élément vide !
La propriété innerHTML La propriété innerHTML désigne le code HTML présent dans l’élément. Ce n’est pas une fonction standard, mais elle est très pratique Ici on modifie le contenu de Un_Enfant Un_Enfant.innerHTML= 'plusieurs <b>éléments</b><br> deux lignes';
La propriété innerHTML Tout le contenu de Un_Enfant a été remplacé par le code HTML 'plusieurs <b>éléments</b><br> deux lignes'; On peut remarquer que cela a donné un ensemble d’éléments qui est le résultat de l’analyse de la chaîne de caractères.
Le support d’exemples : Variation sur un thème Je vous laisse deviner ce que cela fait. C’est facile à voir, plus dur à comprendre. Un_Enfant.innerHTML= '<input type="button" value="Kill Me." onclick="document.getElementById(\'notre_cible\').removeChild(document.getElementById(\'un_enfant\'))">';
Conclusion On a vu des manipulations sur un exemple très simple, mais imaginez ce que l’on peut faire en manipulant des tableaux ,des images ou simplement du texte sur une page entière. Attention bien vérifier le fonctionnement sur différent navigateur, notamment pour les formulaires et les listes numérotées. Et ce n’est pas fini, reste les manipulations sur les propriétés des éléments, c’est plus simple mais pas moins riche en possibilités.