d.o.m. modèle objet de document ou comment parler à la page pour la rendre plus vivante
TRANSCRIPT
D.O.M.Modèle Objet de
DocumentOu 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
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 XMLLangage 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
<html><head>
<title>Test</title></head><body> <h3>Un titre</h3> <p id="para">Un texte
<b>en gras</b></p>
</body></html>
Ce qu’affiche le navigateur
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
particuliersL’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
particuliersL’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]
0
0
1
1
0
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 structureDistinctes 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 noeudLe 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 noeudLe 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 noeudLe 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 noeudLe 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 noeudLe 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 noeudLe 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 »
<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>
Deux documents 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 Balisevar 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 textevar 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
L’affichage qu’il donnerait
Le code HTML qui correspondrait
<div> Mon visiteur
</div>
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.
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 Insérer un élément dans le DOM de la page
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.