1 / 27

Arbres DOM (OC informatique, EPFL)

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>.

margo
Download Presentation

Arbres DOM (OC informatique, EPFL)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Arbres DOM(OC informatique, EPFL)

  2. Création d'éléments HTML var body = document.bodyvar 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>

  3. 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 <bodyonload="execute()"><h2>Leçon sur le DOM</h2><p>DOM signifie <i><b>document object model</b></i></p></body>

  4. head body html table html head tr tr td td td td body table texte1 texte2 texte3 texte4 Deux représentations d’un arbre HTML <body> <table> <tr> <td>text1</td> <td>text2</td> </tr> <tr> <td>text3</td> <td>text4</td> </tr> </table> </body>

  5. Un arbre (terminologie) racine feuille nœud parent nœud enfant feuille feuille

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

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

  8. Accès à un élément d’un arbre <body> <table> <tr> <td>text1</td> <td>text2</td> </tr> <tr> <td>text3</td> <td>text4</td> </tr> </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 .childNodes[1] .firstChild.value

  9. 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)

  10. 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)

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

  12. liste identité identité 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

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

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

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

  16. 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"

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

  18. 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 !

  19. Troisième syntaxe d’arbre: XML {prenom : "Peter", nom : "Tagasi"} <prenom>Peter</prenom> <nom>Tagasi</nom>

  20. 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>

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

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

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

  24. 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

  25. 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

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

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

More Related