View
105
Download
0
Category
Tags:
Preview:
Citation preview
Arbres DOM et XML(OC informatique, EPFL)
html
head
body
table
html
head body
table
tr
td td
texte1 texte2
tr
td td
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>
Un arbre (terminologie)
racine
feuille nœud
nœud
feuille feuille
parent
enfant
Attributs des nœuds
html
head body
table
tr 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
head body
table - childNodes
tr tr
aNode
aNode.childNodes[1]aNode.lastChild
node.childNodes.lengthaNode.childNodes[0]aNode.firstNode
aNode.parentNode
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
Adjonction d’un nœud
unNoeud = document.getElementById("unTR")
nouvTD = document.createElement("TD")
unNoeud.appendChild(nouvTD)
<table><tr id="unTR">
<td>text1</td><td>text2</td><td></td>
</tr></table>
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
function parcourtEnfants(noeud) { // définitionfor (var i=0 ; i<noeud.childNodes.length ; i++) {
alert(noeud.childNodes[i].nodeName)}
} leNoeud:
leNoeud = document.getElementById("leNoeud")
parcourtEnfants(leNoeud) // appel
liste
identité 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 objetslst = { 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éfinitionhttp_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éfinitionhttp_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/
Recommended