Leçon sur le DOM

">

La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Arbres DOM (OC informatique, EPFL)

Présentations similaires


Présentation au sujet: "Arbres DOM (OC informatique, EPFL)"— Transcription de la présentation:

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


Télécharger ppt "Arbres DOM (OC informatique, EPFL)"

Présentations similaires


Annonces Google