D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.
-
Upload
benoit-crouzet -
Category
Documents
-
view
105 -
download
1
Transcript of D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.
![Page 1: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/1.jpg)
D.O.M.Modèle Objet de
DocumentOu comment parler à la page pour la rendre plus vivante.
![Page 2: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/2.jpg)
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.
![Page 3: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/3.jpg)
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.
![Page 4: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/4.jpg)
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.
![Page 5: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/5.jpg)
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
![Page 6: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/6.jpg)
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
![Page 7: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/7.jpg)
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.
![Page 8: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/8.jpg)
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.
![Page 9: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/9.jpg)
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)
![Page 10: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/10.jpg)
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
![Page 11: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/11.jpg)
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>
![Page 12: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/12.jpg)
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.
![Page 13: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/13.jpg)
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
![Page 14: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/14.jpg)
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
![Page 15: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/15.jpg)
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.
![Page 16: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/16.jpg)
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.
![Page 17: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/17.jpg)
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
![Page 18: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/18.jpg)
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.
![Page 19: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/19.jpg)
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)
![Page 20: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/20.jpg)
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']
![Page 21: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/21.jpg)
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é.
![Page 22: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/22.jpg)
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)
![Page 23: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/23.jpg)
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.
![Page 24: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/24.jpg)
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
![Page 25: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/25.jpg)
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
![Page 26: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/26.jpg)
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.
![Page 27: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/27.jpg)
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.
![Page 28: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/28.jpg)
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
![Page 29: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/29.jpg)
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
![Page 30: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/30.jpg)
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
![Page 31: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/31.jpg)
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)">…
![Page 32: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/32.jpg)
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')
![Page 33: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/33.jpg)
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
![Page 34: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/34.jpg)
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
![Page 35: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/35.jpg)
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
![Page 36: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/36.jpg)
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
![Page 37: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/37.jpg)
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]
![Page 38: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/38.jpg)
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
![Page 39: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/39.jpg)
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
![Page 40: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/40.jpg)
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
![Page 41: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/41.jpg)
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
![Page 42: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/42.jpg)
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.
![Page 43: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/43.jpg)
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
![Page 44: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/44.jpg)
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.
![Page 45: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/45.jpg)
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.
![Page 46: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/46.jpg)
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.
![Page 47: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/47.jpg)
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"
![Page 48: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/48.jpg)
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;}
![Page 49: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/49.jpg)
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>
![Page 50: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/50.jpg)
Le support d’exemples :
La représentation du DOM
![Page 51: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/51.jpg)
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.
![Page 52: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/52.jpg)
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()">
![Page 53: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/53.jpg)
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');
![Page 54: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/54.jpg)
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
![Page 55: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/55.jpg)
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
![Page 56: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/56.jpg)
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>
![Page 57: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/57.jpg)
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.
![Page 58: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/58.jpg)
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
![Page 59: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/59.jpg)
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.
![Page 60: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/60.jpg)
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>
![Page 61: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/61.jpg)
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
![Page 62: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/62.jpg)
Le support d’exemples :
Variation sur un thème Placer Mon_Visiteur
avant Un_Enfant
Notre_Cible.insertBefore(Mon_Visiteur,Un_Enfant);
![Page 63: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/63.jpg)
Le support d’exemples :
Variation sur un thème Remplace Un_Enfant
par Mon_Visiteur
Notre_Cible.replaceChild(Mon_Visiteur,Un_Enfant);
![Page 64: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/64.jpg)
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
![Page 65: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/65.jpg)
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
![Page 66: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/66.jpg)
Le support d’exemples :
Variation sur un thème Efface Un_Enfant
Notre_Cible.removeChild(Un_Enfant);
![Page 67: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/67.jpg)
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 !
![Page 68: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/68.jpg)
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';
![Page 69: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/69.jpg)
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.
![Page 70: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/70.jpg)
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\'))">';
![Page 71: D.O.M. Modèle Objet de Document Ou comment parler à la page pour la rendre plus vivante.](https://reader035.fdocument.pub/reader035/viewer/2022062622/551d9dd9497959293b8e7231/html5/thumbnails/71.jpg)
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.