Arbres DOM et XML (OC informatique, EPFL). html head body table html headbody table tr td texte1texte2 tr td texte3texte4 Deux représentations d’un arbre

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>


</tr><tr>


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

http://lti.epfl.ch/Livre



Documents

Arbres DOM et XML (OC informatique, EPFL). html head body table html headbody table tr td texte1texte2 tr td texte3texte4 Deux représentations d’un arbre