JAVASCRIPT
1
DOM
INTRODUCTION
Le modèle objet du document (Document Object
Model ou DOM) est la représentation par des objets
d'une page WEB.
Il permet, par programmation, de manipuler le
contenu du document d'une manière structurée et
orientée objet.
Il possède plusieurs méthodes pour accéder aux
divers objets, changer leurs propriétés, en ajouter
ou en détruire.
2
1
Les navigateurs, au moment du
chargement d'une page, construisent
une structure arborescente sous forme
de noeuds représentants les éléments,
les attributs, le texte et autres.
Document
HTML
head body … …
text h1 text p
text i
text
4
2
TYPES DE NOEUDS
Il existe plusieurs types de noeuds dans le DOM
mais en ce qui concerne le HTML seulement trois
sont utilisés:
les noeuds élément
les noeuds de texte
les noeuds d'attribut
Les noeuds éléments
Ces noeuds représentent les éléments d'une page
Web. Ils peuvent avoir des descendants qui seront
ou bien des noeuds éléments ou alors des noeuds de
texte.
5
Les noeuds de texte
Ces noeuds correspondent au texte
lui-même. Ils ont un parent et
possiblement des noeuds frères mais
pas de descendant.
3
Les noeuds attribut
Ce sont des noeuds spéciaux. Il ne font pas partie
de l'arborescence du document comme tel et ne sont
là que pour représenter les divers attributs des
noeuds élément. Ils n'ont ni parent, ni frères ni
enfants. Ce sont des chaînes de texte. Pour gérer
ces attributs nous avons les méthodes suivantes:
createAttribute()
setAttributeNode()
getAttribute()
setAttribute()
removeAttribute()
7
removeAttributeNode()
POUR OBTENIR LES INFOS DOM
Vous pouvez télécharger la barre d'outils pour
Internet Web Developer Toolbar pour Firefox :
[Link]
US/firefox/addon/dom-inspector-6622/
4
<html>
<head>
<title>Exemple</title>
</head>
<body>
<h1>Le DOM </h1>
<p>un texte dans le <i>dom.</i></p>
</body>
</html>
Les différents objets possèdent leurs propres
propriétés et leur propres méthodes en plus d'un
ensemble commun pour manipuler la structure
elle-même.
A
B C D
B1 C1 C2 10
5
Propriété description
parentNode le nœud père
childnodes nœud fil du nœud courant
firstChild le premier nœud fil
lastChild le dernier nœud
previousSibling le nœud frère précèdent
nextSibling nœud frère suivant
11
Supposons que Nœud A a comme id= "ndA" :
NoeudA=[Link]("ndA " );
[Link] B
[Link] D
[Link] 3
NouedC=[Link][1] C
[Link] A
[Link] D
NoeudB=[Link] B
NoeudB. prevSibling null
12
6
L'objet document est probablement
l'un des objets les plus importants du
modèle objet javascript.
Il permet d'accéder à tous les éléments
affichés sur la page, de contrôler les
saisies, de modifier l'apparence et le
contenu.
13
La racine de l'arborescence est l'objet
«document» qui implante aussi l'interface
des nœuds. Il possède des nœuds enfants
mais pas de parent ou de frères puisqu'il est
la racine de l'arbre. Quelques méthodes :
getElementById()
getElementByTagName()
createElement()
createTextNode()
createAttribute()
14
7
L'objet «nœud» possède aussi des méthodes
qui permettent de modifier la structure elle-
même comme par exemple:
insertBefore()
replaceChild()
cloneNode()
removeChild()
appendChild()
15
APPENDCHILD
Ajoute un nœud à la fin de la liste des enfants d'un nœud
parent spécifié. Si le nœud existe déjà, il est retiré de son
nœud parent actuel et ajouté au nouveau nœud parent.
Syntaxe
var elementAjoute = [Link](enfant); element est
l'élément parent.
enfant est le nœud à ajouter sous element.
elementAjoute contiendra l'élément ajouté, soit enfant.
16
8
CREATEELEMENT, CREATETEXTNODE, APPENDCHILD
<html>
<head>
<title>DOM</title>
<script type="text/javascript">
function ajouterMessage() {
var elemP = [Link]("p");
var elemTexte = [Link]("Salut les amis !!!");
[Link](elemTexte);
[Link](elemP);
}
</script>
</head>
<body onload="ajouterMessage()">
<P>BONJOUR</p>
</body> 17
</html
INSERTBEFORE
Ajoute un élément soit à la fin du document soit avant
l’élément spécifié.
Syntaxe:
[Link]("elementID").insertBefore(param1, param2)
Paramètres:
param1 Requis; le nouveau élément.
param2 Optionel; l’élément après lequel on va insérer le
nouveau élément. Si absent sera
inséré à la fin.
18
9
<html>
<head>
<title>DOM</title>
<script type="text/javascript">
function ajouterMessage() {
var elemP = [Link]("p");
var elemTexte = [Link]("Salut les amis !!!");
[Link](elemTexte);
var avant = [Link]("p")[0];
[Link](elemP, avant);
}
</script>
</head>
<body onload="ajouterMessage()">
<P>BONJOUR</p> 19
</body>
</html>
removeChild
Retire un nœud enfant de l'abre DOM.
Syntaxe
ancienEnfant = [Link](enfant) enfant est le
nœud enfant à retirer du DOM.
element est le nœud parent de enfant.
ancienEnfant conserve une référence au nœud enfant
retiré. ancienEnfant == enfant.
Le nœud retiré existe toujours en mémoire, mais ne fait
plus partie du DOM. Il peut être réutilisé plus tard dans
votre code, via la référence à l'objet ancienEnfant.
20
Si enfant n'est en fait pas un enfant du nœud element, la
méthode provoque une exception.
10
<html>
<head>
<title>DOM</title>
<script type="text/javascript">
function enleverMessage() {
var elemP = [Link]("p")[0];
if (elemP==null)
alert(" Liste vide" );
else
var enleve=[Link](elemP);
}
</script>
</head>
<body>
<P>A</P>
<P>B</P>
<P>C</P>
<input type="button" value="Retirer" 21
onClick="enleverMessage()">
</body></html>
AUTRE VERSION
<html>
<head>
<title>DOM</title>
<script type="text/javascript">
function enleverMessage() {
var elemP = [Link]("p")[0];
if (elemP==null)
alert(" Liste vide" );
else
[Link](elemP);
}
</script>
</head>
<body>
<P>A</P>
<P>B</P>
<P>C</P> 22
<input type="button" value="Retirer" onClick="enleverMessage()">
</body> </html>
11
REPLACECHILD
Remplace un nœud enfant de l'élément courant par un autre
nœud.
Syntaxe
noeudRemplacé = [Link](nouvelEnfant,
ancienEnfant); nouvelEnfant est le nouveau nœud qui
remplacera ancienEnfant.
ancienEnfant est le nœud existant à remplacer.
noeudRemplacé est le nœud remplacé. C'est le même nœud
que ancienEnfant.
23
<html>
<head>
<title>DOM</title>
<script type="text/javascript">
function remplaceMessage() {
var nouveauP = [Link]("p");
var leTexte = [Link]("Bonjour les amis !!!");
[Link](leTexte);
var ancienP = [Link]("p")[0];
[Link](nouveauP, ancienP);
}
</script>
</head>
<body>
<P>A</P>
<P>B</P>
<P>C</P>
<input type="button" value="Remplacer" onClick="remplaceMessage()"> 24
</body>
</html>
12
CLONENODE
Renvoie une copie du nœud courant.
Syntaxe
copieNode = [Link](profond); profond est une valeur
booléenne obligatoire, elle indique si la copie doit se faire en
profondeur ou non.
Si profond est défini à false, aucun des nœuds enfants n'est copié.
Si profond est évalué à true, le sous-arbre entier est copié également
Exemple
p = [Link]("para1");
p_prime =[Link](true);
Cloner un nœud copie tous ses attributs ainsi que leurs valeurs.
Le nœud dupliqué renvoyé par cloneNode ne fera pas partie du
document tant qu'il n'y est pas ajouté via la méthode appendChild
ou une méthode similaire. De même, il n'aura pas d'élément
parent tant qu'il n'a pas été ainsi ajouté à un autre nœud. 25
CRÉATION D'UNE TABLE EN UTILISANT
EXCLUSIVEMENT LE DOM
Avant propos <tr>
<td>ligne 1, colonne 1</td>
<td>ligne 1, colonne 2</td>
<table border="1">
</tr>
<thead>
<tr>
<tr>
<td>ligne 2, colonne 1</td>
<th>Entete 1</th>
<td>ligne 2, colonne 2</td>
<th>Entete 2</th>
</tr>
</tr>
<tfoot>
</thead>
<tr>
<th>Entete 1</th>
<th>Entete 2</th>
</tr>
</tfoot></table> 26
13
<script language="javascript">
function createTable(nbLig,nbCol){
//1) créer le noeud tbody
var tbody = [Link]("TBODY");
for(var i = 0; i < nbLig; i++){
var tr = [Link]("TR");
for (var j = 0; j < nbCol; j++){
var td = [Link]("TD");
var td_text = "rows "+eval(i+1)+", cols "+eval(j+1);
td_text = [Link](td_text);
[Link](td_text);
[Link](td);
}
[Link](tr); 27
//2) créer thead et tfoot
var thead = [Link]("THEAD");
var tfoot = [Link]("TFOOT");
var trTitle = [Link]("TR");
for (var j = 0; j < nbCol; j++){
var th = [Link]("TH");
[Link]([Link]("colonne " + j));
[Link](th);
}
[Link]([Link](true));
[Link]([Link](true));
28
14
//3) créer caption
var caption = [Link]("CAPTION");
var caption_text = "ceci est un tableau de "+nbLig;
caption_text += " lignes et de"+nbCol +" colonnes";
caption_text += " publié à l'aide du DOM";
caption_text = [Link](caption_text);
[Link](caption_text);
//4) créer la table avec border=1
var table = [Link]("TABLE");
[Link]("border",1);
[Link](caption);
[Link](thead);
[Link](tfoot);
[Link](tbody); 29
//5) ajouter la table à l'élement «content»
[Link]("content").appendChild(table);
}
</script>
Nombre lignes : <input type=text
id="lignes"> Nombre colonnes :
<input type=text id="colonnes">
<input type=button value="Créer table"
onClick=createTable([Link]("lignes").value,d
[Link]("colonnes").value);>
<br><br>
<div id="content">
</div>
30
15
AUTRE EXEMPLE POUR «SELECT»
<html>
<head>
<title>DOM</title>
<script language="JavaScript">
function defRegion()
{
var frmProv = [Link]("inscription");
var selProv = [Link]("bc_Prov");
var selVille = [Link]("bc_ville");
var indiceProv = [Link][[Link]].value;
// Temps que selVille contient des noeuds...
while ([Link]())
{
// Supprime le premier noeud.
[Link]([Link]);
} 31
//choix vide
var opt = [Link]("option");
[Link]("value", "");
var itmText = [Link]("Faites votre choix");
[Link](itmText);
[Link](opt);
// Suivant la région sélectionnée...
switch (indiceProv)
{
case "on":
// Créé un noeud pour la liste.
var opt = [Link]("option");
[Link]("value", 167);
var itmText = [Link]("Toronto");
[Link](itmText);
[Link](opt);
var opt = [Link]("option");
[Link]("value", 168);
var itmText = [Link]("Ottawa");
[Link](itmText); 32
[Link](opt);
break;
16
case "qc":
// Créé un noeud pour la liste.
var opt = [Link]("option");
[Link]("value", 124);
var itmText = [Link]("Montréal");
[Link](itmText);
[Link](opt);
var opt = [Link]("option");
[Link]("value", 133);
var itmText = [Link]("Québec");
[Link](itmText);
[Link](opt);
var opt = [Link]("option");
[Link]("value", 140);
var itmText = [Link]("Laval");
[Link](itmText);
[Link](opt);
33
var opt = [Link]("option");
[Link]("value", 147);
var itmText = [Link]("Longueil");
[Link](itmText);
[Link](opt);
var opt = [Link]("option");
[Link]("value", 164);
var itmText = [Link]("Dorion");
[Link](itmText);
[Link](opt);
break;
}
}
</script> 34
</head>
17
<body onLoad="defRegion();">
<FORM id="inscription" name="inscription">
<SELECT id="bc_Prov" name="bc_Prov"
onChange="defRegion();">
<optgroup label="Province">
<option value="qc">Québec</option>
<option value="on" SELECTED>Ontario</option>
</SELECT>
<SELECT id="bc_ville" name="bc_ville">
</SELECT>
</FORM>
</body>
</html>
35
AUTRE EXEMPLE
<html> var element =
[Link]("option");
<head>
[Link]('value','Valeur_1');
<title>DOM</title>
var itmText =
<script language="javascript"> [Link]("Québec");
[Link](itmText);
function ajouter(){ [Link](element);
try { [Link](selection);
}
var conteneur = catch(e) {
[Link]("champs_sup");
alert(e);
}
var ligne = [Link]('p');
}
</script>
var selection =
[Link]('select'); </head>
<body>
[Link]('name','nom_du_select'); <input type=button value="Créer"
onClick=ajouter();>
<div id = "champs_sup"></div>
</body>
</html>
36
18
SETATTRIBUTE (ENCORE)
var P = [Link]("p");
[Link]("class", "enGras");
[Link]("ici").appendChild(P);
37
NEXTSIBLING
Renvoie le nœud suivant immédiatement le
nœud spécifié dans la liste des enfants
(childNodes) de son nœud parent, ou null si le
nœud spécifié est le dernier dans cette liste.
Syntaxe
noeud_suivant = [Link]
L'opération inverse previousSibling permet de
rechercher l'élément précédent.
38
19
Exemple
<html><head><title>Test</title>
<ul>
</head><body>
<ul>
<li>premier point</li>
<li>deuxième point</li> <li> <li>
</ul>
<script type="text/javascript">
<!--
[Link]("L'élément ul a les nœuds subordonnés suivants:<br>");
var noeud = [Link]("ul")[0].firstChild;
while (noeud!=null) {
[Link]("Un nœud qui a pour nom <b>" + [Link] + "<\/b><br>");
noeud = [Link];
}
//-->
</script>
39
</body></html>
AUTRES MÉTHODES
hasChildNodes()
Vérifie si un objet possède des nœuds enfants
(childNodes), et renvoie true si c'est le cas.
removeAttribute(attribut)
Supprime l'attribut de l'objet.
40
20
LES GESTIONNAIRES D'ÉVÉNEMENT DOM
Le modèle d'événement DOM définit deux méthodes,
addEventListener et removeEventListener, qui
permettent d'attacher ou de détacher un gestionnaire
d'événement d'un nœud .
41
Syntaxe
[Link](type, listener);
Paramètres
type une chaîne représentant le type d'évènement à
enregistrer.
listener l'objet qui recevra une notification lorsqu'un
évènement du type spécifié se produit. Il doit s'agir d'un
objet implémentant l'interface EventListener interface, ou
simplement une fonction JavaScript.
Dans IE, il est nécessaire d'utiliser attachEvent plutôt que
la méthode standard addEventListener.
42
21
EXEMPLE
<html> // fonction pour ajouter un écouteur à t
<head> function load() {
<title>Exemple de DOM Event</title> var el = [Link]("t");
<style type="text/css"> if ([Link]){
#t { border: 1px solid red } [Link]('click', modifieTexte);
#t1 { background-color: pink; } } else if ([Link]) {
</style> [Link]('onclick', modifieTexte);
<script type="text/javascript"> }
// fonction pour modifier le contenu de t2 }
function modifieTexte() { </script>
var t2 = [Link]("t2"); </head>
[Link] = "trois"; <body onload="load();">
} <table id="t">
<tr><td id="t1">un</td></tr>
<tr><td id="t2">deux</td></tr>
</table>
</body>
</html>
43
ANCIENNE MANIÈRE D'ATTACHER DES
ÉVÈNEMENTS
Ancienne manière d'attacher des évènements
La méthode addEventListener() a été ajoutée dans la spécification
DOM 2 Events. Avant cela, les évènements étaient attachés de la
manière suivante :
// Utilisation d'une référence à une fonction — notez l'absence
//de parenthèses
[Link] = modifyText;
// Utilisation d'une fonction directe
[Link] = function() {
...instructions...
};
44
22
REMOVEEVENTLISTENER
removeEventListener() permet de retirer des
gestionnaires d'événements (objets EventListener)
de la cible de l'événement.
Syntaxe
[Link](type, listener);
45
GESTION DES ERREURS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Untitled</TITLE>
<META NAME="GENERATOR" CONTENT="MAX's HTML Beauty++ 2004">
</HEAD>
<BODY>
<SCRIPT>
<!--
try
{
[Link]("Pour l'instant tout se passe bien...<br>")
eval("15+*3")
[Link]("Fin du bloc, tout s'est bien passé ?<br>")
}
catch(err)
{
[Link]("Une exception a eu lieu !<br>")
[Link]("Nom de l'exception : " + [Link]+"<br>")
[Link]("Message d'erreur reçu : " + [Link])
}
46
// -->
</SCRIPT></BODY>
</HTML>
23