Arbres DOM (OC informatique, EPFL)
Création d'éléments HTML var body = document.body var titre = document.createElement("h2") body.appendChild(titre) titre.appendChild(document.createTextNode("Leçon sur le DOM")) Equivalent à <body onload="execute()"> <h2>Leçon sur le DOM</h2> </body>
Adjonction d'éléments HTML var paragraphe = document.createElement("p") body.appendChild(paragraphe) paragraphe.appendChild(document.createTextNode("DOM signifie ")) var span = document.createElement("span") span.style.fontWeight = "bold" span.style.fontStyle = "italic" paragraphe.appendChild(span) object model")) span.appendChild(document.createTextNode("document Produit <body onload="execute()"> <h2>Leçon sur le DOM</h2> <p>DOM signifie <i><b>document object model</b></i></p> </body>
Deux représentations d’un arbre HTML <body> <table> <tr> <td>text1</td> <td>text2</td> </tr> <td>text3</td> <td>text4</td> </table> </body> html head body table html head body table tr td texte1 texte2 texte3 texte4
Un arbre (terminologie) racine feuille nœud parent nœud enfant feuille feuille
Attributs des nœuds html head body table tr tr document.body (défini par le navigateur) head body table aNode tr tr aNode.tagName node.nodeName: BODY, TABLE, TR, TD, #text node.textContent: texte du sous-arbre
Relations des nœuds html head body table - childNodes tr tr aNode.parentNode table - childNodes aNode tr tr aNode.childNodes[1] aNode.lastChild node.childNodes.length aNode.childNodes[0] aNode.firstNode
Accès à un élément d’un arbre <body> <table> <tr> <td>text1</td> <td>text2</td> </tr> <td>text3</td> <td>text4</td> </table> </body> 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 .firstChild.value
Adjonction d’un nœud <table> <tr id="unTR"> <td>text1</td> <td>text2</td> <td></td> </tr> </table> unNoeud = document.getElementById("unTR") nouvTD = document.createElement("TD") unNoeud.appendChild(nouvTD)
Adjonction d’un texte <table> <tr id="unTR"> <td>text1</td> <td>text2</td> <td>mon texte</td> </tr> </table> 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 liste identité 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", 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"} <prenom>Peter</prenom> <nom>Tagasi</nom>
Liste d’emprunts <emprunts> <personne> <identite> <prenom>Peter</prenom> <nom>Tagasi</nom> </identite> <livres> <titre>Tarzan dans les arbres</titre> <titre>Jane sur une branche</titre> </livres> </personne> </emprunts>
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("<html>") temp.push("<h1>" + txt + "<h1>") temp.push("</html>") File.write( "tmp.xml", temp.join("\n") )
Fichiers disponibles sur LemanOS http://lti.epfl.ch/Livre http://lti.epfl.ch/Livre/AJAX/