SlideShare une entreprise Scribd logo
1  sur  19
Télécharger pour lire hors ligne
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

Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel phpKhadim Mbacké
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursLilia Sfaxi
 
Cours python avancé
Cours python avancéCours python avancé
Cours python avancépierrepo
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRSLilia Sfaxi
 
Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1
Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1
Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1Addi Ait-Mlouk
 
Cours python
Cours pythonCours python
Cours pythonsalmazen
 
Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop amat samiâ boualil
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - CorrectionLilia Sfaxi
 
Les règles de passage
Les règles de passageLes règles de passage
Les règles de passagemarwa baich
 
Reconnaissance faciale
Reconnaissance facialeReconnaissance faciale
Reconnaissance facialeAymen Fodda
 
Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 ayoub damir
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSSSamuel Robert
 

Tendances (20)

Support programmation orientée objet c# .net version f8
Support programmation orientée objet c#  .net version f8Support programmation orientée objet c#  .net version f8
Support programmation orientée objet c# .net version f8
 
Support POO Java Deuxième Partie
Support POO Java Deuxième PartieSupport POO Java Deuxième Partie
Support POO Java Deuxième Partie
 
Introduction à Python
Introduction à PythonIntroduction à Python
Introduction à Python
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 
Android-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateursAndroid-Tp2: liste et adaptateurs
Android-Tp2: liste et adaptateurs
 
Cours python avancé
Cours python avancéCours python avancé
Cours python avancé
 
Tp2 - WS avec JAXRS
Tp2 - WS avec JAXRSTp2 - WS avec JAXRS
Tp2 - WS avec JAXRS
 
Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1
Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1
Paramétrage et développement spécifique des modules odoo(OpenERP) Partie 1
 
Cours python
Cours pythonCours python
Cours python
 
Le langage html
Le langage htmlLe langage html
Le langage html
 
Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop Rapport projet: relisation d'une app desktop
Rapport projet: relisation d'une app desktop
 
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 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
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
 
Les règles de passage
Les règles de passageLes règles de passage
Les règles de passage
 
Support POO Java première partie
Support POO Java première partieSupport POO Java première partie
Support POO Java première partie
 
Reconnaissance faciale
Reconnaissance facialeReconnaissance faciale
Reconnaissance faciale
 
COURS_PYTHON_22.ppt
COURS_PYTHON_22.pptCOURS_PYTHON_22.ppt
COURS_PYTHON_22.ppt
 
Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8 Rapport de stage pfe odoo 8
Rapport de stage pfe odoo 8
 
Les bases de l'HTML / CSS
Les bases de l'HTML / CSSLes bases de l'HTML / CSS
Les bases de l'HTML / CSS
 

En vedette

Bases de données réparties
Bases de données répartiesBases de données réparties
Bases de données répartiesAbdelouahed 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 pratiqueAbdelouahed 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ôleAbdelouahed 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 CAbdelouahed Abdou
 
Introduction au traitement d'images
Introduction au traitement d'imagesIntroduction au traitement d'images
Introduction au traitement d'imagesAbdelouahed 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 SourceAfrica 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 (10)

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
 
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 A09Claude 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.pptxBrahimKarimi
 
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'HTML5jverrecchia
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript FrenchVlad Posea
 
Symfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantSymfony2 - Un Framework PHP 5 Performant
Symfony2 - Un Framework PHP 5 PerformantHugo Hamon
 
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.pdfKokitaKaty
 
Activity
ActivityActivity
Activitydido
 
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
 
Hands on lab Elasticsearch
Hands on lab ElasticsearchHands on lab Elasticsearch
Hands on lab ElasticsearchDavid Pilato
 

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
C5 JavascriptC5 Javascript
C5 Javascript
 
C5 Javascript French
C5 Javascript FrenchC5 Javascript French
C5 Javascript French
 
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
 
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
 
Hands on lab Elasticsearch
Hands on lab ElasticsearchHands on lab Elasticsearch
Hands on lab Elasticsearch
 

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>