SlideShare une entreprise Scribd logo
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
HIÉRARCHIE DES NŒUDS
 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
HIÉRARCHIE DES NŒUDS
 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
MANIPULER LES NŒUDS
 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);
}
MANIPULER LES NŒUDS
 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);
}
MANIPULER LES NŒUDS
 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>&nbsp;
<input type="submit" value="Tester"/></p>
</form>
<div id="modifiable"> </div>
</body>
</html>

Contenu connexe

Tendances

Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique
ayoub daoudi
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
ENSET, Université Hassan II Casablanca
 
Cours php
Cours php Cours php
Cours php
Yassine Badri
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
ENSET, Université Hassan II Casablanca
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
ENSET, Université Hassan II Casablanca
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
ENSET, Université Hassan II Casablanca
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
ENSET, Université Hassan II Casablanca
 
Le langage html
Le langage htmlLe langage html
Le langage html
Mohammed Amine Mostefai
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
ENSET, Université Hassan II Casablanca
 
Conception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerceConception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerce
AHMEDBELGHITH4
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
webreaker
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
ENSET, Université Hassan II Casablanca
 
Introduction au web cours.pdf
Introduction au web cours.pdfIntroduction au web cours.pdf
Introduction au web cours.pdf
Elomyakobi
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
ENSET, Université Hassan II Casablanca
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
ENSET, Université Hassan II Casablanca
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
Abdoulaye Dieng
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
Ines Ouaz
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
ENSET, Université Hassan II Casablanca
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
ENSET, Université Hassan II Casablanca
 
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Ayoub Rouzi
 

Tendances (20)

Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique Rapport du Projet de Fin d'année Génie informatique
Rapport du Projet de Fin d'année Génie informatique
 
Support de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfiSupport de cours entrepise java beans ejb m.youssfi
Support de cours entrepise java beans ejb m.youssfi
 
Cours php
Cours php Cours php
Cours php
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
 
Cours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategyCours design pattern m youssfi partie 1 introduction et pattern strategy
Cours design pattern m youssfi partie 1 introduction et pattern strategy
 
Support JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.YoussfiSupport JEE Servlet Jsp MVC M.Youssfi
Support JEE Servlet Jsp MVC M.Youssfi
 
Support de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec SpringSupport de Cours JSF2 Première partie Intégration avec Spring
Support de Cours JSF2 Première partie Intégration avec Spring
 
Le langage html
Le langage htmlLe langage html
Le langage html
 
Support de cours Spring M.youssfi
Support de cours Spring  M.youssfiSupport de cours Spring  M.youssfi
Support de cours Spring M.youssfi
 
Conception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerceConception et réalisation d'une application web et mobile de e-commerce
Conception et réalisation d'une application web et mobile de e-commerce
 
Telecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQLTelecharger Exercices corrigés PL/SQL
Telecharger Exercices corrigés PL/SQL
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Introduction au web cours.pdf
Introduction au web cours.pdfIntroduction au web cours.pdf
Introduction au web cours.pdf
 
Support JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVCSupport JEE Spring Inversion de Controle IOC et Spring MVC
Support JEE Spring Inversion de Controle IOC et Spring MVC
 
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
Développement d'un site web jee de e commerce basé sur spring (m.youssfi)
 
Introduction à Laravel
Introduction à LaravelIntroduction à Laravel
Introduction à Laravel
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Support de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfiSupport de cours technologie et application m.youssfi
Support de cours technologie et application m.youssfi
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
 

En vedette

Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
Abdelouahed Abdou
 
Bases de données réparties
Bases de données répartiesBases de données réparties
Bases de données réparties
Abdelouahed Abdou
 
PL/SQL:les curseurs
PL/SQL:les curseursPL/SQL:les curseurs
PL/SQL:les curseurs
Abdelouahed Abdou
 
Introduction à pl/sql
Introduction à pl/sqlIntroduction à pl/sql
Introduction à pl/sql
Abdelouahed Abdou
 
Bases de données réparties par la pratique
Bases de données réparties par la pratiqueBases de données réparties par la pratique
Bases de données réparties par la pratique
Abdelouahed Abdou
 
Pl/sql - interaction avec la base de données & structures de contrôle
Pl/sql  - interaction avec la base de données & structures de contrôlePl/sql  - interaction avec la base de données & structures de contrôle
Pl/sql - interaction avec la base de données & structures de contrôle
Abdelouahed Abdou
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
Abdelouahed Abdou
 
Chapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en CChapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en C
Abdelouahed Abdou
 
Introduction au traitement d'images
Introduction au traitement d'imagesIntroduction au traitement d'images
Introduction au traitement d'images
Abdelouahed Abdou
 
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open SourcePrésentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Africa Performances
 
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Abdelouahed Abdou
 

En vedette (11)

Introduction à ASP.NET
Introduction à ASP.NETIntroduction à ASP.NET
Introduction à ASP.NET
 
Bases de données réparties
Bases de données répartiesBases de données réparties
Bases de données réparties
 
PL/SQL:les curseurs
PL/SQL:les curseursPL/SQL:les curseurs
PL/SQL:les curseurs
 
Introduction à pl/sql
Introduction à pl/sqlIntroduction à pl/sql
Introduction à pl/sql
 
Bases de données réparties par la pratique
Bases de données réparties par la pratiqueBases de données réparties par la pratique
Bases de données réparties par la pratique
 
Pl/sql - interaction avec la base de données & structures de contrôle
Pl/sql  - interaction avec la base de données & structures de contrôlePl/sql  - interaction avec la base de données & structures de contrôle
Pl/sql - interaction avec la base de données & structures de contrôle
 
Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)Ajax (Asynchronous JavaScript and XML)
Ajax (Asynchronous JavaScript and XML)
 
Chapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en CChapitre 3 tableaux et pointeurs en C
Chapitre 3 tableaux et pointeurs en C
 
Introduction au traitement d'images
Introduction au traitement d'imagesIntroduction au traitement d'images
Introduction au traitement d'images
 
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open SourcePrésentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
Présentation de OpenERP/Odoo: Progiciel de Gestion Intégré Open Source
 
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
Développement de modules pour odoo (anciennement OpenERP): exemples et exerci...
 

Similaire à Document Object Model ( DOM)

Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
DNG Consulting
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
jverrecchia
 
JQuery
JQueryJQuery
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
Abdoulaye Dieng
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
Hugo Hamon
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
1- XML généralités technologies xml1.pdf
1- XML généralités technologies xml1.pdf1- XML généralités technologies xml1.pdf
1- XML généralités technologies xml1.pdf
KokitaKaty
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
Abdoulaye Dieng
 
Activity
ActivityActivity
Activitydido
 
Confectionner des DSL avec XTEXT pour un programme pascale.pdf
Confectionner des DSL avec XTEXT pour un programme pascale.pdfConfectionner des DSL avec XTEXT pour un programme pascale.pdf
Confectionner des DSL avec XTEXT pour un programme pascale.pdf
VictoireTchamou
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
Martin Latrille
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
Jean Michel
 

Similaire à Document Object Model ( DOM) (20)

Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)Introduction aux Web components (DNG Consulting)
Introduction aux Web components (DNG Consulting)
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
JQuery
JQueryJQuery
JQuery
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Introduction au Jquery
Introduction au JqueryIntroduction au Jquery
Introduction au Jquery
 
cours Php
cours Phpcours Php
cours Php
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 Performant
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
1- XML généralités technologies xml1.pdf
1- XML généralités technologies xml1.pdf1- XML généralités technologies xml1.pdf
1- XML généralités technologies xml1.pdf
 
Tapestry
TapestryTapestry
Tapestry
 
Introduction à jQuery
Introduction à jQueryIntroduction à jQuery
Introduction à jQuery
 
Crs javascript
Crs javascriptCrs javascript
Crs javascript
 
Activity
ActivityActivity
Activity
 
Confectionner des DSL avec XTEXT pour un programme pascale.pdf
Confectionner des DSL avec XTEXT pour un programme pascale.pdfConfectionner des DSL avec XTEXT pour un programme pascale.pdf
Confectionner des DSL avec XTEXT pour un programme pascale.pdf
 
Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)Présentation de Django @ Orange Labs (FR)
Présentation de Django @ Orange Labs (FR)
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 

Document Object Model ( DOM)

  • 1. AJAX: CHAPITRE1: DOCUMENT OBJECT MODEL (DOM) Abdelouahed Sabri abdelouahed.sabri@gmail.com 2012/2013
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. HIÉRARCHIE DES NŒUDS  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
  • 10. HIÉRARCHIE DES NŒUDS  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>
  • 11. 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
  • 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>
  • 13. 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>
  • 14. 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>
  • 15. 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
  • 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
  • 17. MANIPULER LES NŒUDS  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); }
  • 18. MANIPULER LES NŒUDS  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); }
  • 19. MANIPULER LES NŒUDS  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>&nbsp; <input type="submit" value="Tester"/></p> </form> <div id="modifiable"> </div> </body> </html>