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>

Adjonction d'éléments HTMLvar 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>

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

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



Arbres DOM (OC informatique, EPFL)

Documents

Transcript of Arbres DOM (OC informatique, EPFL)