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 HTML text1 text2 text3 text4

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

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

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

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

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

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

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

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é

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) }

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) }

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

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"

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

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 !

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

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

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

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")

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")

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

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

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

Fichiers disponibles sur LemanOS