Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Document Object Model ( DOM)

2,188 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.

  • Be the first to comment

  • Be the first to like this

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>

×