Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

AJAX: CHAPITRE1: DOCUMENT OBJECT MODEL (DOM) Abdelouahed Sabri abdelouahed.sabr

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> <input type="submit" value="Tester"/></p> </form> <div id="modifiable"> </div> </body> </html> uploads/s1/ document-object-model-dom.pdf