Document Object Model ( DOM)

AJAX:
CHAPITRE1: DOCUMENT OBJECT MODEL
(DOM)
Abdelouahed Sabri
abdelouahed.sabri@gmail.com
2012/2013

INTRODUCTION
 Le Document Object Model (ou DOM) est un
standard du W3C qui décrit une interface
indépendante de tout langage de
programmation et de toute plate-forme,
permettant à des programmes informatiques et à
des scripts d'accéder et/ou de mettre à jour le
contenu, la structure ou le style de documents
(langage de balisage) XML et HTML.
Src. Wikipédia
2

HISTORIQUE
 Avant sa standardisation par le W3C,
chaque navigateur web disposait de son
propre Document Object Model.
 Différence entre noms d’objets pour différents
Navigateur web  il faut écrire plusieurs versions de
chaque morceau de script pour rendre un site
accessible au plus grand nombre de navigateur
 La standardisation de ces techniques s'est faite
en plusieurs étapes  DOM 1, DOM 2 et DOM 3
3

HISTORIQUE
 DOM niveau 1:
 Publié en 1998
 Définition par le W3C d’une manière précise de représenter
un document (en particulier un document XML) sous la
forme d'un arbre
 Ainsi, chaque élément généré à partir du balisage forme un
nœud (Node):
 pour le cas de HTML, un paragraphe, un titre ou un
bouton de formulaire et considéré comme un nœud
 Aussi, ils ont introduits plusieurs fonctions qui permettent
de manipuler l’arbre: ajouter, modifier ou supprimer des
éléments (nœuds).
4

HISTORIQUE
 DOM 2:
 Publié en 2002
 Possibilité de manipuler les événements, les styles et
les Views
 Dans cette version, il est possible d’identifier
rapidement un nœud ou un groupe de nœuds dans un
document
 Avant, on cherche un nœud dans un tableau
 DOM 2 fera appel à la fonction getElementById()
 Norme standard de W3C
5

HISTORIQUE
 DOM 3:
 Publié en 2004
 Ajout d’interface de chargement (événement Load) et
de sauvegarde de documents XML, Xpath (événement
Save).
6

NŒUDS
 Tout composant ou élément d’un document de balissage
(Html, Xhtml ou XML) constitue un nœud (node)
 Document node (nœud document): le document lui méme.
 Ex. le document entier
 Toutefois la balise comme iframe peut introduire un nouveau document
 Element node (nœud élément): chaque balise ou élément.
 Ex. <hi>, <p>, <ul>, <li>, …
 Text node (noeud texte): texte contenu entre les balises.
 Ex., pour <p> Mon paragraphe</p>, les mots "Mon paragraphe"
constituent un nœud texte
 Attribute node (noeud attribut): Chaque attribut d’une balise ou
élément.
 Ex: Pour <img href="logo.png« alt="Logo" />, href et alt sont des
nœuds attribut
 Comment node (noeud de commentaire): Commentaires
7

HIÉRARCHIE DES NŒUDS
 Les nœuds dans un langage de balisage sont en
relation hiérarchique sou forme d’un arbre
généalogique
 Ainsi, la realtion entre nœuds peut étre qualifié
de relation:
 parent/enfant:
 Des nœuds peuvent avoir des ascendants et des
descendants:
 Nœuds ascendants sont les nœuds qui sont parents d’un
nœud ou parents d’un nœud parent
 Nœuds descendants sont les nœuds qui sont enfants d’un
nœud ou enfants d’un nœud enfant
 frères et sœurs (siblings), 8

 Exemple:
9
<html>
<head>
<title>Hiérarchie des nœuds</title>
</head>
<body>
<h1>Titre de niveau 1</h1>
<p>Mon paragraphe</p>
<h2>Titre de niveau 2</h2>
</body>
</html>
Document
HTML
Head
Title
Hiérarchie
des nœuds
Body
H1
Titre de
niveau 1
P
Mon
paragraph
e
H2
Titre de
niveau 2
 Types de nœuds:
 nœud document: Document
 nœuds élément: html, head, body, title, h1, p, h2
 Nœuds texte: Hiérarchie des nœuds, Titre de niveau 1, Mon paragraphe, Titre
de niveau 2

 Exemple (suite): Relation entre nœuds:
11
Nœud parent Nœud fils
HTML HEAD
HEAD TITLE
TITLE Hiérarchie des nœuds
BODY H2
H2 Titre de niveau 2
NB: À l’exception du
nœud document, chaque
nœud a un parent:
Nœuds frères et sœurs (siblings)
<H1>, <P> ET <H2>
<HEAD> et <BODY>
Ascendants Descendants
<HTML> Les nœuds de texte
<BODY> le nœud de texte de <p>

ACCÉDER AU NŒUDS
 Pour manipuler les nœuds dans un document, on va utiliser les
méthodes et propriétés de l’objet «document »
 Méthodes:
 getElementById(x): retourne le nœud élément dont l'ID est x
 getElementsByName(x): retourne la liste de nœuds identifiés par l’attribut
name="X" . Le résultat est sous forme d’un tableau Array.
 getElementsByTagName(x): retourne la liste de nœuds (balises) de type
spécifique « X ». Le résultat est sous forme d’un tableau Array
 item(n) : retourne l'élément en position n dans une lise de nœuds
 Propriétés:
 innerHTML : attribut pour lire ou assigner le contenu d'un ID. utiliser avec les
nœuds de type 3 (#Texte)
 parentNode: Renvoie le nœud parent d’un nœud.
 firstChild: Renvoie le premier enfant d’un nœud
 lastChild: Renvoie le dernier enfant d’un nœud
 childNodes(x): Stocke une liste de tous les nœuds enfant disponibles à partir d’un
nœud X
 previousSibling: Renvoie le nœud frères/sœurs précédent d’un nœud.
 nextSibling; Renvoie le nœud frères/sœurs suivant d’un nœud.
 nodeName: Indique le nom du nœud sélectionné
 nodeType: Indique le type de nœud rencontré. 1 si le nœud est un élément. 2 si
c’est un attribut. 3 s’il s’agit du nœud de texte
 nodeValue: Permet d’obtenir ou de changer la valeur d’un nœud de type texte
12

ACCÉDER AU NŒUDS
 Exemple:
13
<html> <head>
<title>Hiérarchie des nœuds</title>
<script type="text/javascript">
function GetNode() {
var x = document.getElementById("Ttr1").nodeName;
var y = document.getElementsByName("btn")[0].value;
//var y = document.getElementsByName("btn").item(0).value;
var z = document.getElementsByTagName("ul")[0].parentNode;
var f = document.getElementById("Ttr2").firstChild.nodeValue; ;
alert("x: " + x + "n" + "y:" + y + "n" + "z:" + z + "n" + "e:" + e + "n" + "f:" + f);
}
</script>
</head>
<body>
<h1 id="Ttr1">Titre de niveau 1</h1>
<p>Mon paragraphe</p>
<ul> <li> choix 1</li><li> choix 2</li><li> choix 3</li></ul>
<input type="text" value="Mon Texte" name="Txt"/>
<h1 id="H1">Titre de niveau 1</h1>
<h2 id="Ttr2">Titre de niveau 2</h2>
<input type="button" name="btn" value="Afficher" onclick="GetNode()" />
</body> </html>

ACCÉDER AU NŒUDS
 Exercice: pour la page HTML d’en bas
 Ecrire le code JavaScript pour afficher un pop-up contenant:
 Le titre
 Le type du bouton « Afficher ». L’attribut Name du bouton est «btn »
 Le nom de la balise « Un deuxième paragraphe portant l'identifiant p12 »
 Le nom du nœud parent du premier titre h2
 Le deuxième paragraphe dont l'identifiant p12
 Le premier titre h2
 le texte en gras dans « premier paragraphe »
 Ecrire le code pour remplacer le texte «Deuxième titre h2 » par le texte du bouton
«Afficher»
14
<html> <head> <title>Exercice d'accès aux Nœuds</title> </head>
<body> <h1>Exemples d'accès aux éléments</h1> <h2>Premier titre h2</h2>
<p>Un premier <b>paragraphe.</b></p> <p id="p12">Un deuxième paragraphe portant l'identifiant p12</p>
<p>Un troisième paragraphe.</p>
<h2>Deuxième titre h2</h2>
<p>Un quatrième paragraphe.</p>
<p name="unpar">Un cinquième paragraphe portant le name unpar.</p>
<p name="unpar">Un sixième paragraphe portant le name unpar.</p>
<p>Un septième paragraphe.</p>
<input type="button" value="Afficher" name="btn" onclick="DOM()" />
</body> </html>

ACCÉDER AU NŒUDS
 Exercice (suite):
15
<script type="text/javascript">
function DOM() {
var tt=document.title;
var nt= document.getElementsByName("btn").item(0).nodeType;
var nn= document.getElementById("p12").nodeName;
var nnp=document.getElementsByTagName("h2").item(0).parentNode.nodeName;
var ndn= document.getElementById("p12").firstChild.nodeValue;
// ou bien
//var ndn=document.getElementById("p12").innerHTML;
var npt= document.getElementsByTagName("h2").item(0).firstChild.nodeValue;
var tgp= document.getElementsByTagName("p").item(0).childNodes.item(1).firstChild.nodeValue;
alert(tt+"n"+nt+"n"+nn+"n"+nnp+"n"+ndn+"n"+npt+"n"+tgp);
var x = document.getElementsByName("btn");
var y = document.getElementsByTagName("h2");
y.item(0).firstChild.nodeValue = x.item(0).value;
}
</script>

ACCÉDER AUX ATTRIBUTS
 Les attributs sont des propriétés de l’élément
 La propriété « attributes » renvoie une liste des
attributs d’un élément spécifié.
 Exemple:
// Lecture de la valeur d’un attribut
var para = document.getElementsByTagName("p").item(0);
var attributs = para.attributes;
alert(attributs.getNamedItem("lang").nodeValue);
// Ajout d’un attribut
var attr = document.createAttribute("visible");
attr.value = "false";
para.attributes.setNamedItem(attr); 16

MANIPULER LES NŒUDS
 Pour ajouter ou supprimer un nœud on utilise:
 Méthodes
 createElement("TagName") : crée un élément et retourne un objet
Element (un type de Node)
 createTextNode("data") : crée un nœud de type #text
 appendChild(x) : ajoute un élément à l'instance, en tant que dernier
enfant. Cette méthode s’applique toujours à un nœud parent.
 insertBefore(x, y): insère un nœud x avant un autre nœud y.
 replaceChild(x,y): remplace un nœud y par un autre nœud x
 removeChild(Node): supprime le nœud (et éventuellement ses
descendants)
17

 Exemple:
18
function AddNode() {
var x = document.createElement("p");
var texte = document.createTextNode("Nouveau Paragraphe");
x.appendChild(texte);
var attr = document.createAttribute("title");
attr.value = "Nouveau title du paragraphe";
x.attributes.setNamedItem(attr);
document.body.appendChild(x);
}
function AddNodeBefore() {
var y= document.getElementById("H1");
var x = document.createElement("p");
var texte = document.createTextNode("Nouveau Paragraphe");
x.appendChild(texte);
var attr = document.createAttribute("title");
attr.value = "Nouveau title du paragraphe";
x.attributes.setNamedItem(attr);
document.body.insertBefore(x,y);
}

 Exemple:
19
function repChild() {
var h1 = document.createElement("H1");
var txt = document.createTextNode("Nouveau Titre1");
h1.appendChild(txt);
var y = document.getElementById("H2");
document.body.replaceChild(h1, y);
}
function remNode() {
var y = document.getElementsByTagName("input")[0];
// var y = document.getElementsByTagName("input").item(0);
document.body.removeChild(y);
//y.parentNode.removeChild(y);
}

 Créer la page Web suivante et Ajouter les scripts JavaScript pour
Ajouter, Supprimer, Insérer avant et Remplacer
20
<body>
<form action="">
<p>
<textarea id="zonetexte" rows="3" cols="30"></textarea>
</p>
<p>
<input type="radio" name="bouton" />Ajouter
<input type="radio" name="bouton" />Supprimer
<input type="radio" name="bouton" />Insérer avant
<input type="radio" name="bouton" />Remplacer
</p>
<p>
Quel paragraphe ? : <select id="liste"></select> 
<input type="submit" value="Tester"/></p>
</form>
<div id="modifiable"> </div>
</body>
</html>

Document Object Model ( DOM)

Contenu connexe

Tendances

En vedette

Similaire à Document Object Model ( DOM)

Document Object Model ( DOM)