Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Arbres DOM (OC informatique, EPFL)
2
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>
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 <body onload="execute()"> <h2>Leçon sur le DOM</h2> <p>DOM signifie <i><b>document object model</b></i></p> </body>
4
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
5
Un arbre (terminologie)
racine feuille nœud parent nœud enfant feuille feuille
6
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
7
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
8
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
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
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é
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", 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
Présentations similaires
