25
Arbres DOM et XML (OC informatique, EPFL)
| Date post: | 04-Apr-2015 |
| Category: |
Documents |
| Upload: | noe-savary |
| View: | 104 times |
| Download: | 0 times |
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/
