XML Introduction à DOM Document Object Model
Généralités Définition Le modèle objet de document de XML (XML DOM) définit une manière standard pour accéder et manipuler des documents XML Il présente un document de XML sous la forme d un un arbre de nœuds, avec les éléments, les attributs, et le texte définis tous comme des nœuds Son objectif Mettre le document XML en mémoire sous une forme objet Traduire les éléments en objets : attributs et méthodes Permettre ensuite à toute application de l utiliser de manière uniforme à travers les méthodes définies sur ses objets 2
Généralités Exemple : books.xml <bookstore> <book category="web"> <book category="cooking"> <title lang="en">xquery Kick Start</title> <title lang="en">everyday <author>james McGovern</author> <author>per Bothner</author> Italian</title> <author>kurt Cagle</author> <author>giada De Laurentiis <author>james Linn</author> </author> <author>vaidyanathan Nagarajan</author> <year>2005</year> <year>2003</year> <price>30.00</price> <price>49.99</price> </book> </book> <book category="web"> <book category="children"> <title lang="en">learning XML</title> <title lang="en">harry Potter</title> <author>erik T. Ray</author> <author>j K. Rowling</author> <year>2003</year> <year>2005</year> <price>39.95</price> </book> <price>29.99</price> </bookstore> </book> 3
Généralités L arbre correspondant 4
L arbre DOM Qu est ce qu un arbre de nœuds? Un arbre de nœuds représente un document XML par un ensemble de nœuds et de relations entre eux Dans un arbre de nœuds, le nœud supérieur s'appelle la racine Chaque nœud, excepté la racine, a exactement un nœud parent Un nœud peut avoir tout nombre d'enfants Une feuille est un nœud sans enfants Des enfants sont des nœuds avec le même parent 5
L arbre DOM Le document books.xml peut avoir l arbre relationnel suivant : 6
Le document XML Chargement : les opérations Créer d abord un objet de type DOMDocument Dim xmldoc = New DOMDocument Une fois créé, on peut le charger, le parser, etc. Charger du XML dans le DOM xmlldoc.load("http://xmlfiles/reports.xml") xmldoc.load("c:\temp\reports.xml") Charger une chaîne XML xmldoc.loadxml("<customer><first_name>joe</first_name> <last_name>smith</last_name></customer>") Sauvegarder un fichier XML xmldoc.save("c:\temp\reports.xml") 7
Le document XML Chargement suivant le navigateur Version Internet Explorer Insertion dans le code JavaScript <script type="text/javascript"> var xmldoc=new ActiveXObject("Microsoft.XMLDOM") xmldoc.async="false" // indique que tout doit être chargé en mémoire avant de poursuivre l exécution du script xmldoc.load("fichier.xml"); Document.loadXML('<?xml version="1.0"?><library/>'); //loadxml() permet de charger un string qui contient du code XML </script> A partir de là, on peut utiliser les nœuds comme des objets à partir de JavaScript 8
Chargement du document XML Version Mozilla Le code JavaScript pour la création <script type="text/javascript"> var xmldoc = document.implementation.createdocument("","",null); xmldoc.load("note.xml"); </script> Le fichier complet : test du navigateur Lecture-IE-Moz.html 9
Chargement du document XML Si le fichier est le HTML courant Il n est pas nécessaire de le charger On peut utiliser directement la variable document qui le désigne Exemple : <script type="text/javascript"> <!-- document.write("coucou"); --> </script> <body> </body> </html> 10
Le nœud Chaque élément XML est appelé nœud Il a une définition Par ex : documentelement représente la racine Des propriétés parentnode, childnodes, firstchild, lastchild, previoussibling et nextsibling permettent de retourner respectivement le père, les enfants, le premier enfant, le dernier enfant, le frère précédent et le frère suivant du nœud courant Des méthodes lui sont associées, permettant de : créer (createnode,...), modifier (replacechild,...), supprimer (remove,...) ou d'extraire des données (get,...) de n'importe quel élément ou contenu d'un document XML 11
Accéder aux nœuds Accès direct getelementbyid permet de sélectionner un élément d'identifiant donné dans une page getelementsbyname permet de sélectionner les éléments portant un nom donné dans une page ; mais cette méthode, survivance de Netscape, n'est pas supportée par IE getelementsbytagname permet de sélectionner les éléments portant un nom de balise donné dans une page getattribute(nom_d_attribut) permet de sélectionner un attribut particulier d'un élément déterminé 12
Accéder aux nœuds Exemple getelementsbytagname.html Ici, on cherche tous les éléments de nom «book» et on imprime leur catégorie xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); for (i=0;i<x.length;i++) { } document.write(x[i].getattribute('category')); document.write("<br />"); Résultat COOKING CHILDREN WEB WEB 13
Accéder aux nœuds Exemple getnameditem.html Ici, on fait la même chose que précédemment, mais on passe par les attributs var x=xmldoc.getelementsbytagname("book"); for(i=0;i<x.length;i++) { } var attlist=x.item(i).attributes; var att=attlist.getnameditem("category"); document.write(att.value + "<br />") Résultat COOKING CHILDREN WEB WEB 14
Accéder aux nœuds Le document est le document HTML Exemple : acces-direct.html Dans cet exemple, on accède directement aux éléments du document HTML qui se trouvent entre <body> et </body> On accède aux tags par leur nom, ID et attributs Aux composants des formulaires Aux images 15
Accéder aux nœuds Exemple 2 : acces-direct.html function init(){ info=document.getelementbyid("zonei nfo");} function demo_getelementbyid(){ x=document.getelementbyid("p12"); alert(x.innerhtml);} function demo_getelementsbyname(){ collection=document.getelementsbyn ame("unpar"); for (i=0;i<collection.length;i++){ alert("contenu de l'élément de nom unpar numéro "+i+" :\n"+collection[i].innerhtml); } }. <body onload="init();"> <h1>exemples d'accès direct aux éléments</h1> <h2>premier titre h2</h2> <p>un premier paragraphe.</p> <p id="p12">un deuxième <i>paragraphe</i>, portant l'identifiant <code>p12</code>.</p> <p>un troisième paragraphe.</p> <h2>deuxième <small>titre</small> h2</h2> <p>un quatrième paragraphe.</p> <p name="unpar">un cinquième <b>paragraphe</b>, portant le name <code>unpar</code>.</p> <p name="unpar">un sixième paragraphe, portant le name <code>unpar</code>.</p> <p>un septième paragraphe.</p> <hr> 16
Accéder aux nœuds acces-direct.html function demo_getelementsbytagname() {collection=document.getelementsbyt agname("h2"); for (i=0;i<collection.length;i++){ alert("contenu de l'élément balisé h2 numéro "+i+" :\n"+collection[i].innerhtml); } } function information(message){ info.innerhtml=message;} function choix_demo(){ quelledemo=document.getelementbyi d("select1").value; switch (quelledemo){ case "id": information("démonstration de la méthode <code>getelementbyid</code> (IE et Netscape).");demo_getElementById(); break; <select name="demo" id="select1"> <option value="id">démo getelementbyid</option> <option value="name">démo getelementsbyname</option> <option value="tagname">démo getelementsbytagname</option> </select> <button type="submit" onclick="choix_demo();">ok</but ton> <p id="zoneinfo"> </p> </body> </html> 17
Accéder aux nœuds Exercice Exo6.html 18
Informations sur les nœuds Informations sur la nature d'un nœud Deux propriétés permettent d'obtenir des informations sur la nature d'un nœud spécifié : nodename renvoie le nom du nœud courant Le nodename d'un nœud élément est le nom de la balise Le nodename d'un noeud attribut est le nom de l attribut Le nom d'un nœud texte est toujours #texte Le nom du nœud document est toujours #document nodetype renvoie le type du nœud 19
Informations sur les nœuds Valeur du nodetype 21
Informations sur les nœuds nodetype - nodename - nodevalue 22
Informations sur les nœuds nodename-nodevalue : nodename-value.html xmldoc=loadxmldoc("books.xml"); document.write("nodename: " + xmldoc.nodename); document.write(" (value: " + xmldoc.childnodes[0].nodevalue + ")<br />"); var x=xmldoc.documentelement; document.write("nodename: " + x.nodename); document.write(" (value: " + x.childnodes[0].nodevalue + ")<br />"); var y=xmldoc.documentelement.childnodes; for (i=0;i<y.length;i++) { document.write("nodename: " + y[i].nodename) document.write(" (value: " + y[i].childnodes[0].nodevalue + ")<br />") 23
Informations sur les nœuds nodename-value.html Nodename: #document (value: version="1.0" encoding="iso- 8859-1") Nodename: bookstore (value: null) Nodename: book (value: null) Nodename: title (value: Everyday Italian) Nodename: author (value: Giada De Laurentiis) Nodename: year (value: 2005) Nodename: price (value: 30.00) Nodename: book (value: null) Nodename: title (value: Harry Potter) Nodename: author (value: J K. Rowling) Nodename: year (value: 2005) Nodename: price (value: 29.99) Nodename: book (value: null) Nodename: title (value: XQuery Kick Start) Nodename: author (value: James McGovern) Nodename: author (value: Per Bothner) Nodename: author (value: Kurt Cagle) Nodename: author (value: James Linn) Nodename: author (value: Vaidyanathan Nagarajan) Nodename: year (value: 2003) Nodename: price (value: 49.99) Nodename: book (value: null) Nodename: title (value: Learning XML) Nodename: author (value: Erik T. Ray) Nodename: year (value: 2003) Nodename: price (value: 39.95) 24
Informations sur les nœuds nodename-nodetype : nodename-type.html xmldoc=loadxmldoc("books.xml"); document.write("nodename: " + xmldoc.nodename); document.write(" (nodetype: " + xmldoc.nodetype + ")<br />"); var x=xmldoc.documentelement; document.write("nodename: " + x.nodename); document.write(" (nodetype: " + x.nodetype + ")<br />"); var y=x.childnodes; for (i=0;i<y.length;i++) { document.write("nodename: " + y[i].nodename) document.write(" (nodetype: " + y[i].nodetype + ")<br />") 25
Informations sur les nœuds nodename-type.html Nodename: #document (nodetype: 9) Nodename: bookstore (nodetype: 1) Nodename: book (nodetype: 1) Nodename: title (nodetype: 1) Nodename: author (nodetype: 1) Nodename: year (nodetype: 1) Nodename: price (nodetype: 1) Nodename: book (nodetype: 1) Nodename: title (nodetype: 1) Nodename: author (nodetype: 1) Nodename: year (nodetype: 1) Nodename: price (nodetype: 1) Nodename: book (nodetype: 1) Nodename: title (nodetype: 1) Nodename: author (nodetype: 1) Nodename: author (nodetype: 1) Nodename: author (nodetype: 1) Nodename: author (nodetype: 1) Nodename: author (nodetype: 1) Nodename: year (nodetype: 1) Nodename: price (nodetype: 1) Nodename: book (nodetype: 1) Nodename: title (nodetype: 1) Nodename: author (nodetype: 1) Nodename: year (nodetype: 1) Nodename: price (nodetype: 1) 26
Listes de nœuds Définition Quand on utilise des propriétés ou méthodes comme childnodes ou getelementsbytagname(), on obtient un objet NodeList Un objet de NodeList représente une liste ordonnée de nœuds Les nœuds dans le NodeList peuvent être consultés par leur numéro d'index (à partir de 0) Remarque Dans un NodeList, les noeuds sont retournés dans l'ordre dans lequel ils sont indiqués dans le XML 27
Listes de nœuds En considérant books.xml getelementsbytagname("title") crée une liste de nœuds de éléments <titre> getelementsbytagname("title")[ 0].childNodes[0].nodeValue donnerait comme résultat : Everyday Italian Liste créée 28
Listes de nœuds Exemple : chargement-text.html <html> <body> <script type="text/javascript"> var text="<note>" text=text+"<to>tove</to><from>jani</from>" text=text+"<heading>reminder</heading>" text=text+"<body>don't forget me this weekend!</body>" text=text+"</note>" var xmldoc=new ActiveXObject("Microsoft.XMLDOM") xmldoc.async="false" xmldoc.loadxml(text) document.write("the first child element in the text contains: " + xmldoc.documentelement.childnodes(0).text) document.write("<br />") document.write("the second child element in the text contains: " + xmldoc.documentelement.childnodes(1).text) </script> </body> <html> 29
Listes de nœuds Soit le document note.xml suivant <?xml version="1.0" encoding="iso-8859-1"?> <note time="12:03:46"> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend! </body> </note> 30
Listes de nœuds Affichage des éléments et de leurs contenus textuels : Ecriturenodes.html // xmldoc représente le document et documentelement sa racine xmldoc.load("note.xml"); var x=xmldoc.documentelement; for (i=0;i<x.childnodes.length;i++) //itération sur tous les fils de la racine { document.write(x.childnodes[i].nodename); //imprime le nom du noeud document.write("="); document.write(x.childnodes[i].childnodes[0].nodevalue); //imprime la valeur du noeud document.write("<br />"); } Résultat : to=tove from=jani heading=reminder body=don't forget me this weekend! 31
Listes de nœuds Autre façon de faire la même chose : lecture-child.html <html> <body> <script type="text/vbscript"> set xmldoc=createobject("microsoft.xmldom") xmldoc.async="false" xmldoc.load("note.xml") for each x in xmldoc.documentelement.childnodes document.write("<b>" & x.nodename & ":</b> ") //nom document.write(x.text) //valeur document.write("<br />") next </script> </body> </html> 32
Listes de nœuds Niveau d un nœud dans la hiérarchie : nodetype.html function ecriture() { var x=xmldoc.documentelement.childnodes; for (i=0;i<x.length;i++) } { document.write(x[i].nodetype); document.write("<br />"); } Résultat 1 1 1 1 33
Listes de nœuds Test de nodetype : nodetype2.html xmldoc.load("books.xml"); var x=xmldoc.documentelement.childnodes; for (var i=0;i<x.length;i++) { if ((x[i].nodetype!=3)&&(x[i].nodetype!=8)) { //Do not process text nodes or comment nodes document.write(x[i].nodename); document.write("<br />"); } } Résultat book book book book 34
Accéder aux nœuds Accès relatif Les méthodes précédentes demandaient de connaître précisément soit l'identifiant, soit le nom exact du nœud cherché Nous allons voir maintenant comment il est possible d'accéder à des collections de nœuds dont on ne connaît pas ces caractéristiques a priori Accès aux attributs Contrairement à la méthode getattribute(), qui permet de retourner la valeur d'un attribut de nom donné, la propriété attributes renvoie à la collection complète des attributs d'un élément Par exemple, si elt désigne l'élément img suivant, cette méthode renverra une liste constituée des nœuds src, alt, width et height (dans cet ordre) <img src="oiseau.gif" alt="un oiseau sur un arbre" width="45" height="60"> 35
Accéder aux nœuds Attributes La propriété d'attributs renvoie un NamedNodeMap contenant les attributs du nœud sélectionné Si le nœud choisi n'est pas un élément, cette propriété renvoie null Syntaxe elementnode.attributes Exemple xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname("book")[0].attributes; document.write(x.length); Résultat 1 36
Accéder aux nœuds GetAttribute() Code: <p id="myid" attr="my attribute value">... <script> var ptag1 = document.getelementbyid('myid'); document.write(ptag1.getattribute('attr') + '<br>\n'); ptag1.setattribute('attr', 'my new attribute value'); document.write(ptag1.getattribute('attr')); </script> Output: my attribute value my new attribute value 37
Modification de nœuds Placez un nouvel attribut et une valeur d'attribut SetAttribute() permet de changer la valeur d'un attribut existant, ou de créer une nouvelle valeur d'attribut pour un élément Le code suivant ajoute une nouvelle valeur d'attribut à chaque élément <book> : xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname("book"); for(i=0;i<x.length;i++) { x.item(i).setattribute("edition","first"); } 38
Modification de nœuds Modification d attribut Une autre manière pour le faire xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newatt; for (i=0;i<x.length;i++) { newatt=xmldoc.createattribute("edition"); newatt.value="first"; x[i].setattributenode(newatt); } 39
Modification de nœuds Changer la valeur d un attribut Le code suivant change la valeur de l attribut existant "category" (dans chaque élément <book> ): xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname("book"); for(i=0;i<x.length;i++) { x.item(i).setattribute("category","bestseller"); } 40
Modification de nœuds Changer la valeur d un item GetNamedItem() peut être utilisée pour changer la valeur d'un item existant Exemple : xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname("book"); for(i=0;i<x.length;i++) { var att=x.item(i).attributes.getnameditem("category"); att.value="bestseller"; } 41
Suppression de nœuds Suppression d élément RemoveChild() peut être employée pour supprimer un nœud,indiqué L exemple suivant supprimera le dernier élément < book> //check if last child node is an element node function get_lastchild(n) { var x=n.lastchild; while (x.nodetype!=1) { x=x.previoussibling; } return x; } xmldoc=loadxmldoc("books.xml"); var x=xmldoc.documentelement; x.removechild(get_lastchild(x)); 42
Suppression de nœuds Suppression du texte d un élément DeleteData() supprime des données d'un nœud texte La méthode a deux paramètres: offset - où commencer à enlever des caractères. La valeur offset commence à zéro Count - combien de caractères à supprimer Le code suivant enlèvera les neuf premiers caractères du premier élément <title> xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname("title")[0].childnodes[0]; x.deletedata(0,9); 43
Suppression de nœuds Suppression d un attribut RemoveAttribute() sert à enlever l attribut d un élément Le code suivant enlèvera tous les attributs "category" dans chaque élément <book>: xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); for(i=0;i<x.length;i++) { x.item(i).removeattribute('category'); } 44
Suppression de nœuds Suppression d un attribut : équivalent au précédent RemoveAttributeNode() sert à enlever l attribut d un élément Le code suivant enlèvera tous les attributs "category" dans chaque élément <book>: xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); for(i=0;i<x.length;i++) { attnode=x.item(i).getattributenode("category") old_att=x.item(i).removeattributenode(attnode); document.write("removed attribute: " + old_att.name + "<br />"); } 45
Remplacement de noeuds Remplacement d un nœud dans une liste de nœuds ReplaceChild() Le code suivant crée un nouvel élément <book> qui remplacera le dernier élément <book> : //check if last child node is an element node function get_lastchild(n) { } var x=n.lastchild; while (x.nodetype!=1) { } return x; x=x.previoussibling; http://gilles.chagnon.free.fr/cours/dhtml/introdom.html#exogetelement 46
Remplacement de noeuds Remplacement d un nœud dans une liste de nœuds La suite xmldoc=loadxmldoc("books.xml"); var x=xmldoc.documentelement; //create a book element, title element and a text node var newnode=xmldoc.createelement("book"); var newtitle=xmldoc.createelement("title"); var newtext=xmldoc.createtextnode("a Notebook"); //add the text node to the title node, //and add the title node to the book node newtitle.appendchild(newtext); newnode.appendchild(newtitle); //replace the last node with the new node x.replacechild(newnode,get_lastchild(x)); 47
Remplacement de noeuds Remplacement de donnée dans un élément texte replacedata() Paramètres : offset où commencer le remplacement. La valeur Offset commence à 0 length nombre de caractères à remplacer string la chaîne à insérer Le code suivant remplacera les huit premiers caractères du texte des éléments dans le premier élément <title> par "facile": xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname("title")[0].childnodes[0]; x.replacedata(0,8,"easy"); 48
Création de nœuds Création d un nœud CreateElement() Le code suivant crée un élément (<edition>), et l'ajoute après le dernier enfant de chaque élément < book >: xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newel; for (i=0;i<x.length;i++) { } newel=xmldoc.createelement('edition'); x[i].appendchild(newel); 49
Création de nœuds Création d un attribut de nœud createattribute() Le code suivant crée un attribut "édition" et l'ajoute à tous les éléments <book>: xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newatt; for (i=0;i<x.length;i++) { } newatt=xmldoc.createattribute("edition"); newatt.value="first"; x[i].setattributenode(newatt); 50
Création de nœuds Création d un nœud texte CreateTextNode() crée un nouveau nœud texte Le code suivant crée un élément < edition>, avec le texte (' first '), et l'ajoute après le dernier enfant de chaque élément <book> : xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newel,newtext for (i=0;i<x.length;i++) { } newel=xmldoc.createelement('edition'); newtext=xmldoc.createtextnode('first'); newel.appendchild(newtext); x[i].appendchild(newel); 51
Création de nœuds Création d une section CDATA createcdatasection() Le code suivant crée une section CDATA et l ajoute après le dernier fils de chaque élément <book> : xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newcdata,newtext; newtext="special Offer & Book Sale"; for (i=0;i<x.length;i++) { newcdata=xmldoc.createcdatasection(newtext); x[i].appendchild(newcdata); } 52
Création de nœuds Création d un nœud Comment createcdatasection() Le code suivant crée un élément Comment et l ajoute après le dernier fils de chaque élément <book> : xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newcomment,newtext; newtext="revised September 2006"; for (i=0;i<x.length;i++) { newcomment=xmldoc.createcomment(newtext); x[i].appendchild(newcomment); } 53
Ajout de nœuds Ajout d un nœud AppendChild() ajoute un nœud après le dernier enfant d'un nœud spécifique Cette méthode est utile quand la position de l élément supplémentaire n'est pas importante Le code suivant crée un élément (<edition>), et l'ajoute après le dernier enfant de chaque élément de <book>: xmldoc=loadxmldoc("books.xml"); var x=xmldoc.getelementsbytagname('book'); var newel,newtext; for (i=0;i<x.length;i++) { newel=xmldoc.createelement('edition'); newtext=xmldoc.createtextnode('first'); newel.appendchild(newtext); x[i].appendchild(newel); } 54
Ajout de nœuds Ajout d un nœud avant insertbefore() insère un élément avant un élément spécifique Cette méthode est utile quand la position de l élément ajouté est importante Le code suivant crée un nouvel élément <book> et l insère avant le dernier élément <book> : //check if last child node is an element node get_lastchild(n) { var x=n.lastchild; while (x.nodetype!=1) { x=x.previoussibling; } return x; } 55
Ajout de nœuds Ajout d un nœud avant Suite xmldoc=loadxmldoc("books.xml"); var x=xmldoc.documentelement; var newnode=xmldoc.createelement("book"); var newtitle=xmldoc.createelement("title"); var newtext=xmldoc.createtextnode("a Notebook"); newtitle.appendchild(newtext); newnode.appendchild(newtitle); x.insertbefore(newnode,get_lastchild(x)); 56
Accès aux éléments et attributs Exercices Exo14.html Exo15.html 57
Accéder aux nœuds Accès aux nœuds-enfants On peut accéder très facilement à la liste des nœuds-enfants d'un élément donné Pour cela, trois propriétés existent elt.childnodes donne la liste de tous les nœuds-enfants de l'élément elt elt.firstchild équivalent à elt.childnodes[0], renvoie le premier nœud-enfant de l'élément elt elt.lastchild renvoie le dernier nœud-enfant de l'élément elt http://gilles.chagnon.free.fr/cours/dhtml/introdom.html#exogetelement 58
Accéder aux nœuds Accès aux nœuds-frères Le nœud courant peut avoir des frères On accède au frère précédent à l'aide de la propriété previoussibling, et au nœud suivant par la propriété nextsibling Accès aux nœuds-ancêtres On peut enfin remonter d'un cran dans la hiérarchie des nœuds avec la propriété parentnode, et revenir à l'élément-racine d'un document (dans le cas d'un document HTML, il s'agit bien sûr de <html> ), avec la propriété documentelement http://gilles.chagnon.free.fr/cours/dhtml/introdom.html#exogetelement 59
Accéder aux nœuds Accès au premier élément : firstchild.html //check if the first node is an element node function get_firstchild(n) { var x=n.firstchild; while (x.nodetype!=1) { x=x.nextsibling; } return x; } xmldoc=load("books.xml"); var y=get_firstchild(xmldoc.documentelement); document.write(y.nodename); Résultat book 60
Accéder aux nœuds Accès à l élément précédent : previoussibling.html function get_previoussibling(n) { var x=n.previoussibling; while (x.nodetype!=1) { } x=x.previoussibling; return x; } xmldoc=load("books.xml"); var x=xmldoc.getelementsbytagname("author")[0]; var y=get_previoussibling(x); document.write(y.nodename); Résultat title 61
Informations sur les nœuds Informations sur le contenu d'un nœud Deux méthodes renvoient des booléens permettant de déterminer si un nœud donné possède des enfants, et/ou des attributs Ces méthodes, aux noms explicites, sont respectivement haschildnodes() et hasattributes() http://gilles.chagnon.free.fr/cours/dhtml/introdom.html#exogetelement 62
Accéder aux nœuds Exercice Exo7.html http://gilles.chagnon.free.fr/cours/dhtml/introdom.html#exogetelement 63
Clonage de nœuds Copier un nœud CloneNode() crée une copie d'un nœud indiqué Elle a un paramètre (vrai ou faux). Ce paramètre indique si le nœud copié inclut tous les attributs et nœuds enfant du nœud d origine Le code suivant copie le premier nœud <book>, puis ajoute la copie à la fin de la liste de nœud : http://gilles.chagnon.free.fr/cours/dhtml/introdom.html#exogetelement 64
Clonage de nœuds Exemple xmldoc=loadxmldoc("books.xml"); var oldnode = xmldoc.getelementsbytagname('book')[0]; var newnode=oldnode.clonenode(true); xmldoc.documentelement.appendchild(newnode); //Output all titles var y=xmldoc.getelementsbytagname("title"); for (i=0;i<y.length;i++) { } document.write(y[i].childnodes[0].nodevalue); document.write("<br />"); Résultat Everyday Italian Harry Potter XQuery Kick Start Learning XML Everyday Italian 65
Résumé Liste des propriétés associées aux nœuds objets 66
Résumé Liste des méthodes associées aux nœuds objets 67
Résumé Liste des méthodes associées aux nœuds objets (suite) 68
Références http://www.w3schools.com/dom/dom_validate.asp http://xmlfr.org/w3c/tr/rec-dom-level-1/level-onecore.html#id-b63ed1a3 http://www.w3schools.com/htmldom/dom_obj_document. asp http://nyams.planbweb.com/tutorial/dom/ http://gilles.chagnon.free.fr/cours/dhtml/introdom.html 69