Arbres DOM et XML (OC informatique, EPFL). html head body table html headbody table tr td texte1texte2 tr td texte3texte4 Deux représentations d’un arbre.

Présentation au sujet: "Arbres DOM et XML (OC informatique, EPFL). html head body table html headbody table tr td texte1texte2 tr td texte3texte4 Deux représentations d’un arbre."— Transcription de la présentation:

1 Arbres DOM et XML (OC informatique, EPFL)

2 html head body table html headbody table tr td texte1texte2 tr td texte3texte4 Deux représentations d’un arbre HTML text1 text2 text3 text4

3 Un arbre (terminologie) racine feuillenœud feuille parent enfant

4 Attributs des nœuds html headbody table tr document.body (défini par le navigateur) aNode aNode.tagName node.nodeName: BODY, TABLE, TR, TD, #text node.textContent: texte du sous-arbre inaccessibles

5 Relations des nœuds html headbody table - childNodes tr aNode aNode.childNodes[1] aNode.lastChild node.childNodes.length aNode.childNodes[0] aNode.firstNode aNode.parentNode

6 Accès à un élément d’un arbre text1 text2 text3 text4 Attention, les nœuds d’espaces ne sont pas pris en compte document.body.childNodes[0].childNodes[0].childNodes[1].childNodes[0].value document.body.firstChild.firstChild.childNodes[1].firstChild.value

7 Adjonction d’un nœud unNoeud = document.getElementById("unTR") nouvTD = document.createElement("TD") unNoeud.appendChild(nouvTD) text1 text2

8 Adjonction d’un texte text1 text2 mon texte txt = document.createTextNode("mon texte") nouvTD.appendChild(txt)

9 Elimination d’un nœud unParent.removeChild(unNoeud) unParent.removeChild(unParent.childNodes[1]) unNoeud.parentNode.removeChild(unNoeud)

10 Parcours d’un arbre function parcourtEnfants(noeud) { // définition for (var i=0 ; i<noeud.childNodes.length ; i++) { alert(noeud.childNodes[i].nodeName) } } leNoeud: leNoeud = document.getElementById("leNoeud") parcourtEnfants(leNoeud) // appel liste identité

11 Un étage de l’arbre function parcourtPetitsEnfants(arg) { for (var i=0 ; i<arg.childNodes.length ; i++) { var nd = arg.childNodes[i] alert(nd.nodeName) parcourtEnfants(nd) }

12 Parcours récursif de l’arbre function parcourtPetitsEnfants(arg) { for (var i=0 ; i<arg.childNodes.length ; i++) { var nd = arg.childNodes[i] alert(nd.nodeName) parcourtPetitsEnfants (nd) }

13 Tableaux associatifs et syntaxe objets id = [ ] id [ "prenom" ] = "Peter" id [ "nom" ] = "Tagasi" id [ "prenom" ] = "Peter" id = { prenom : "Peter", nom : "Tagasi" } id.prenom == "Peter"

14 Tableaux associatifs, indicés et objets id = { prenom : "Peter", nom : "Tagasi" } id.prenom == "Peter" ids =[ { prenom : "Peter", nom : "Tagasi" }, { prenom : "Hans", nom : "Vogel" } ] ids[1].nom == "Vogel"

15 Tableaux associatif, indicés et objets lst ={ liste : [ {{identité : {prenom : "Peter", nom : "Tagasi" } }, {{identité : {prenom : "Hans", nom : "Vogel" } ] } lst.liste[0].identite.nom

16 Parcours automatique et récursif for (var key in tableau) { if ((typeof tableau[key] == object) && tableau[key].length…) for (var i=0; i< … … } // un bel exercice !

17 Troisième syntaxe d’arbre: XML {prenom : "Peter", nom : "Tagasi"} Peter Tagasi

18 Liste d’emprunts Peter Tagasi Tarzan dans les arbres Jane sur une branche

19 Lecture / écriture de fichiers de texte et XML (arbres) sur le serveur qui a envoyé la page

20 Lecture synchrone d’un fichier de texte function makeRequest(URL) { // définition http_request = new XMLHttpRequest() http_request.open('GET', URL, false) http_request.send(null) return http_request.responseText } var txt = makeRequest("Tree.xml") // appel var aTbl = txt.getElementsByTagName("personne")

21 Lecture synchrone d’un fichier XML function makeRequest(URL) { // définition http_request = new XMLHttpRequest() http_request.open('GET', URL, false) http_request.send(null) return http_request.responseXML } var xml = makeRequest("Tree.xml") // appel var aTbl = xml.getElementsByTagName("personne")

22 Accès à un arbre XML (2 possibilités) xml.getElementsByTagName("emprunts")[0].childNodes[0].childNodes[0].childNodes[0].firstChild.nodeValue xml.getElementsByTagName("personne")[0].getElementsByTagName("titre")[1].firstChild.nodeValue

23 Appel asynchrone (AJAX) function makeRequest(URL, alertFunction) { http_request = new XMLHttpRequest() http_request.onreadystatechange = function() { alertFunction(http_request,URL) } http_request.open('GET', URL, true) http_request.send(null) return } var alertContents = function (http_local_request, URL) { document.getElementById("Display").innerHTML = http_local_request.responseXML } makeRequest("fiches.xml", alertContents) // appel

24 Ecriture d’un fichier XML var temp = [ ] temp.push(" ") temp.push(" " + txt + " ") temp.push(" ") File.write( "tmp.xml", temp.join("\n") )

25 Fichiers disponibles sur LemanOS http://lti.epfl.ch/Livre http://lti.epfl.ch/Livre/AJAX/