Document Object Model ( DOM)

1,280 views
1,138 views

Published on

Le DOM (Document Object Model) est un standard W3C qui permet à des script (ici JavaScript) d'accéder ou de mettre à jour le contenu visuel, la structure ou le style de documents XML et HTML.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,280
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Document Object Model ( DOM)

  1. 1. AJAX:CHAPITRE1: DOCUMENT OBJECT MODEL(DOM)Abdelouahed Sabriabdelouahed.sabri@gmail.com2012/2013
  2. 2. INTRODUCTION Le Document Object Model (ou DOM) est unstandard du W3C qui décrit une interfaceindépendante de tout langage deprogrammation et de toute plate-forme,permettant à des programmes informatiques et àdes scripts daccéder et/ou de mettre à jour lecontenu, la structure ou le style de documents(langage de balisage) XML et HTML.Src. Wikipédia2
  3. 3. HISTORIQUE Avant sa standardisation par le W3C,chaque navigateur web disposait de sonpropre Document Object Model. Différence entre noms d’objets pour différentsNavigateur web  il faut écrire plusieurs versions dechaque morceau de script pour rendre un siteaccessible au plus grand nombre de navigateur La standardisation de ces techniques sest faiteen plusieurs étapes  DOM 1, DOM 2 et DOM 33
  4. 4. HISTORIQUE DOM niveau 1: Publié en 1998 Définition par le W3C d’une manière précise de représenterun document (en particulier un document XML) sous laforme dun arbre Ainsi, chaque élément généré à partir du balisage forme unnœud (Node): pour le cas de HTML, un paragraphe, un titre ou unbouton de formulaire et considéré comme un nœud Aussi, ils ont introduits plusieurs fonctions qui permettentde manipuler l’arbre: ajouter, modifier ou supprimer deséléments (nœuds).4
  5. 5. HISTORIQUE DOM 2: Publié en 2002 Possibilité de manipuler les événements, les styles etles Views Dans cette version, il est possible d’identifierrapidement un nœud ou un groupe de nœuds dans undocument Avant, on cherche un nœud dans un tableau DOM 2 fera appel à la fonction getElementById() Norme standard de W3C5
  6. 6. HISTORIQUE DOM 3: Publié en 2004 Ajout d’interface de chargement (événement Load) etde sauvegarde de documents XML, Xpath (événementSave).6
  7. 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 desnœuds attribut Comment node (noeud de commentaire): Commentaires7
  8. 8. HIÉRARCHIE DES NŒUDS Les nœuds dans un langage de balisage sont enrelation hiérarchique sou forme d’un arbregénéalogique Ainsi, la realtion entre nœuds peut étre qualifiéde relation: parent/enfant: Des nœuds peuvent avoir des ascendants et desdescendants: Nœuds ascendants sont les nœuds qui sont parents d’unnœud ou parents d’un nœud parent Nœuds descendants sont les nœuds qui sont enfants d’unnœud ou enfants d’un nœud enfant frères et sœurs (siblings), 8
  9. 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>DocumentHTMLHeadTitleHiérarchiedes nœudsBodyH1Titre deniveau 1PMonparagrapheH2Titre deniveau 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, Titrede niveau 2
  10. 10. HIÉRARCHIE DES NŒUDS Exemple (suite): Relation entre nœuds:11Nœud parent Nœud filsHTML HEADHEAD TITLETITLE Hiérarchie des nœudsBODY H2H2 Titre de niveau 2NB: À l’exception dunœud document, chaquenœ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. 11. ACCÉDER AU NŒUDS Pour manipuler les nœuds dans un document, on va utiliser lesméthodes et propriétés de l’objet «document » Méthodes: getElementById(x): retourne le nœud élément dont lID est x getElementsByName(x): retourne la liste de nœuds identifiés par l’attributname="X" . Le résultat est sous forme d’un tableau Array. getElementsByTagName(x): retourne la liste de nœuds (balises) de typespé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 dun ID. utiliser avec lesnœ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’unnœ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 sic’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 texte12
  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. 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 lidentifiant p12 » Le nom du nœud parent du premier titre h2 Le deuxième paragraphe dont lidentifiant 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 daccès aux Nœuds</title> </head><body> <h1>Exemples daccè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 lidentifiant 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. 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. 15. ACCÉDER AUX ATTRIBUTS Les attributs sont des propriétés de l’élément La propriété « attributes » renvoie une liste desattributs d’un élément spécifié. Exemple:// Lecture de la valeur d’un attributvar para = document.getElementsByTagName("p").item(0);var attributs = para.attributes;alert(attributs.getNamedItem("lang").nodeValue);// Ajout d’un attributvar attr = document.createAttribute("visible");attr.value = "false";para.attributes.setNamedItem(attr); 16
  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 objetElement (un type de Node) createTextNode("data") : crée un nœud de type #text appendChild(x) : ajoute un élément à linstance, en tant que dernierenfant. 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 sesdescendants)17
  17. 17. MANIPULER LES NŒUDS Exemple:18function 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. 18. MANIPULER LES NŒUDS Exemple:19function 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. 19. MANIPULER LES NŒUDS Créer la page Web suivante et Ajouter les scripts JavaScript pourAjouter, Supprimer, Insérer avant et Remplacer20<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>

×