L`API DOM : Document Object Model

Transcription

Ingénierie Documentaire
L'API DOM :
Document Object
Model
http://doc.crzt.fr
STÉPHANE CROZAT
16 octobre 2014
Table des
matières
I - Introduction au DOM
5
A. Principes du DOM..........................................................................................5
B. L'interface DOM............................................................................................6
II - Implémentation JavaScript du DOM
9
A. Introduction à JavaScript...............................................................................9
B. Fonctions et objets DOM en JavaScript...........................................................10
C. Spécificités HTML........................................................................................11
III - Fonctions et objets JavaScript liés à XML
13
A. Utiliser XPath..............................................................................................13
B. Exécuter une XSLT......................................................................................14
C. xmlHttpRequest : Communication avec le serveur...........................................14
D. XMLSerializer : Sérialiser un DOM.................................................................16
IV - Exercices
17
A. Travaux pratiques DOM et JavaScript.............................................................17
1. "Hello World !" en JavaScript............................................................................................17
2. Manipulation du DOM en JavaScript...................................................................................17
3. Un éditeur XML en JavaScript............................................................................................19
Solution des exercices
23
Bibliographie
27
Contenus annexes
29
3
Introduction au
DOM
I-
I
Principes du DOM
5
L'interface DOM
6
A. Principes du DOM
Définition
Le DOM ( Document Object Model) est un standard W3C qui décrit une API orientée
objet permettant de représenter un document XML ou HTML en mémoire afin de la
manipuler avec un langage de programmation.
Le standard DOM est indépendant d'un langage de programmation en particulier, et
implémenté dans de nombreux langages (JavaScript, Java, PHP, C, ...).
« The Document Object Model is a platform- and language-neutral interface that
will allow programs and scripts to dynamically access and update the content,
structure and style of documents. »
http://www.w3.org/DOM/1
Fonctions du DOM
L'API DOM permet de :

Parcourir un arbre XML ou HTML

Rechercher des nœuds particuliers, en consulter le contenu

Créer, ajouter, supprimer, déplacer des nœuds dans l'arbre
Exemple
L'API DOM implémentée en JavaScript permet de manipuler un document HTML ou
XHTML, afin d'en modifier dynamiquement (en fonction des actions utilisateurs), la
structure et le contenu :

Faire apparaître ou disparaître des éléments div en fonction d'une action
utilisateur

Créer ou initialiser des contrôles de formulaire

...
1
2
function fDisplay(pDivId) {
var vDiv = document.getElementById(pDivId);
1 - http://www.w3.org/DOM/
5
Introduction au DOM
3
4
Introduction au DOM
vDiv.style.display="block";
}
Rappel
L'arbre du document XML - p.29
B. L'interface DOM
Fondamental

Document Object Model (DOM) Technical Reports

http://www.w3.org/DOM/DOMTR2
Document Object Model Core
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html 3
Objets principaux


Node : Élément central du DOM, il représente tout nœud de l'arbre DOM, les
autres interfaces en héritent.
NodeList : Ensemble ordonné de Nodes.

Document : Racine d'un fichier XML bien formé (ou d'un fichier HTML valide),
son fils est donc l'élément racine du document XML.
Element : Représentation d'un élément au sens XML

Attr : Représentation d'un attribut au sens XML

Text : Contenu textuel d'un nœud texte ou d'un attribut au sens XML

http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID15906262014
Attributs principaux de Node





string nodeName
integer nodeType
Node parentNode
NodeList childNodes
Node firstChild
Attributs principaux de NodeList


Node item(integer index)
integer length
Fonctions principales de Node


2345-
Node insertBefore(Node newChild, Node refChild)
Node replaceChild(Node newChild, Node oldChild)
http://www.w3.org/DOM/DOMTR
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1590626201
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1950641247
6
6
Introduction au DOM




Node removeChild(Node oldChild)
Node appendChild(Node newChild)
boolean hasChildNodes()
Node cloneNode(boolean deep)
Fonctions principales de Document





Element getElementById(string elementId)
NodeList getElementsByTagName(string tagname)
Element createElement(string tagName)
Text createTextNode(string data)
Attr createAttribute(string name)
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#iDocument7
Fonctions principales de Element





NodeList getElementsByTagName(string name)
Attr getAttributeNode(string name)
Attr setAttributeNode(Attr newAttr)
Attr removeAttributeNode(Attr oldAttr)
boolean hasAttribute(string name)
Text (attributs et fonctions)
Attributs :

string data

integer length
Fonctions :

void

void

void

void
appendData(string arg)
insertData(integer offset, string arg)
deleteData(integer offset, integer count)
replaceData(integer offset, integer count, string arg)
Attr (attributs)


string name
string value
6 - http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-1950641247
7 - http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#i-Document
7
Introduction au DOM
Introduction au DOM
Remarque : NameSpace
Il existe toutes les fonctions nécessaires pour gérer les namespaces, comme par
exemple :

NodeList
getElementsByTagNameNS(string
namespaceURI,
string
localName)

Element
createElementNS(string
namespaceURI,
string
qualifiedName)

Attr
createAttributeNS(string
namespaceURI,
string
qualifiedName)
Complément
(Brillant07 [Brillant07], pp238-245)
8
8
Implémentation
JavaScript du
DOM
II -
II
Introduction à JavaScript
11
Fonctions et objets DOM en JavaScript
13
Spécificités HTML
14
A. Introduction à JavaScript
9
Implémentation JavaScript du DOM
Définition : JavaScript
JavaScript est un langage de programmation instance du standard ECMAScript,
principalement utilisé comme langage client dans les navigateurs Web, afin de
rendre dynamique l'affichage et la manipulation de pages HTML.
Rappel : Intégration JavaScript HTML
1
2
3
4
1
2
3
4
5
6
7
8
9
10
11
12
//file.js
function func(pArg1, pArg2) {
...
}
<html>
<head>
...
<script src="file.js" type="text/javascript"></script>
...
</head>
<body>
...
<div ... onClick="func(vArg1, vArg2)">
...
</body>
</html>
Rappel : Introduction au JavaScript
http://fr.selfhtml.org/javascript/intro.htm 11
Rappel : Syntaxe JavaScript
http://fr.selfhtml.org/javascript/langage 12
Complément
: Fonctions JavaScript
http://fr.selfhtml.org/javascript/objets/independant.htm 13
Complément
: Objets JavaScript
http://fr.selfhtml.org/javascript/objets/14
Rappel : Console JavaScript
Pour afficher la console JavaScript sous Firefox : CTRL+MAJ+J
B. Fonctions et objets DOM en JavaScript
Exemple
1
vDiv = document.getElementById("id1");
11 - http://fr.selfhtml.org/javascript/intro.htm
12 - http://fr.selfhtml.org/javascript/langage
13 - http://fr.selfhtml.org/javascript/objets/independant.htm
14 - http://fr.selfhtml.org/javascript/objets/
10
10
Exemple
1
2
3
4
vDivs = document.getElementsByTagName("p");
for (var i=0; i<vDivs.length; i++) {
vDivs.item(i)...;
}
Exemple
1
alert(vDiv.firstChild.data) ;
Exemple
1
vDiv.removeChild(vDiv.firstChild);
Exemple
1
vDiv.appendChild(vDiv2);
Syntaxe

Document

http://fr.selfhtml.org/javascript/objets/document.htm15
Node

http://fr.selfhtml.org/javascript/objets/node.htm16
getElementById

http://fr.selfhtml.org/javascript/objets/document.htm#get_element_by_id 17
getElementByTagName

http://fr.selfhtml.org/javascript/objets/document.htm#get_elements_by_ta
g_name18
firstChild

http://fr.selfhtml.org/javascript/objets/node.htm#first_child19
data
http://fr.selfhtml.org/javascript/objets/node.htm#data20
C. Spécificités HTML
Attributs et méthodes spécifiques aux éléments HTML

input, select : value, name, ...

a : href
15 - http://fr.selfhtml.org/javascript/objets/document.htm
16 - http://fr.selfhtml.org/javascript/objets/node.htm
17 - http://fr.selfhtml.org/javascript/objets/document.htm#get_element_by_id
18 - http://fr.selfhtml.org/javascript/objets/document.htm#get_elements_by_tag_name
19 - http://fr.selfhtml.org/javascript/objets/node.htm#first_child
20 - http://fr.selfhtml.org/javascript/objets/node.htm#data
11

...
http://fr.selfhtml.org/javascript/objets/elementshtml.htm 21
querySelectorAll : Manipulation HTML via les classes CSS
querySelectorAll est une méthode de l'objet document permettant de renvoyer
une liste de nœuds correspondant à l'union des sélecteurs CSS passés en
paramètre.
NodeList document.querySelectorAll(<list_of_selectors>)
https://developer.mozilla.org/En/DOM/Document.querySelectorAll 22
Exemple
1
2
3
4
5
6
7
: querySelectorAll
...
<body>
<div class="class1">...</div>
<div class="class2">...</div>
<div class="class1 class2">...</div>
<div class="class2 class3">...</div>
...
document.querySelectorAll("div.class1, div.class2") renvoie tous les div
de l'extrait HTML ci-avant.
Conseil : Firebug
Installer l'extension Firebug sous Firefox pour pouvoir visualiser dynamiquement le
DOM.
https://addons.mozilla.org/fr/firefox/addon/firebug/ 23
21 - http://fr.selfhtml.org/javascript/objets/elementshtml.htm
22 - https://developer.mozilla.org/En/DOM/Document.querySelectorAll
23 - https://addons.mozilla.org/fr/firefox/addon/firebug/
12
12
Fonctions et
objets JavaScript
liés à XML
III -
III
Utiliser XPath
15
Exécuter une XSLT
15
xmlHttpRequest : Communication avec le serveur
16
XMLSerializer : Sérialiser un DOM
17
A. Utiliser XPath
L'API XPath est moins pratique que l'API DOM en JavaScript, et en conséquence
moins utilisée. Il est néanmoins possible d'exécuter un XPath en fonction d'un
nœud courant, les deux étant passés en paramètres à la méthode evaluate() de
document.
13
Fonctions et objets JavaScript liés à XML
Exemple
1
2
3
4
5
var nodesSnapshot = document.evaluate(<pXPath>, <pContextNode>, null,
XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
{
...nodesSnapshot.snapshotItem(i)...
}
Complément
https://developer.mozilla.org/fr/Introduction_%C3%A0_l
%27utilisation_de_XPath_avec_JavaScript24
B. Exécuter une XSLT
Syntaxe
Objet : XSLTProcessor
Méthodes :

importStylesheet(vXsl)

DocumentFragment transformToFragment(vXml,document)

Document transformToDocument(vXml)
Syntaxe
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Chargement d'une XSLT depuis le serveur
var vXhr = new XMLHttpRequest();
vXhr.open("GET", "fichier.xslt", false);
vXhr.send(null);
var vXsl = vXhr.responseXML;
// Initialisation d'un processeur XSLT
var vProc = new XSLTProcessor();
vProc.importStylesheet(vXsl);
// Sélection d'un nœud XML source de la transformation dans le
Document
var vXml = document.getElementById("source");
// Exécution de la XSLT dans un DocumentFragment vResult
var vResult = vProc.transformToFragment(vXml,document);
// Ajout de vResult dans le Document
document.getElementById("source").appendChild(vResult);
C. xmlHttpRequest : Communication avec le serveur
L'objet XMLHttpRequest permet d'envoyer des commandes POST et GET à un
serveur HTTP, en particulier (mais pas uniquement) pour transmettre des
documents XML entre le client et le serveur.
24 - https://developer.mozilla.org/fr/Introduction_%C3%A0_l%27utilisation_de_XPath_avec_JavaScript
14
14
Exemple
1
2
3
: Exécuter un fichier PHP avec des paramètres
5
vXhr.open("POST", "fichier.php" , false);
vXhr.setRequestHeader("Content-type", "application/x-www-formurlencoded");
var vArgs="key1=" + encodeURIComponent(vValue1) + "&key2=" +
encodeURIComponent(vValue2);
vXhr.send(vArgs);
1
2
3
4
5
<?php
$vParam1=$_POST['key1'];
$pParam2=$_POST['key2'];
...
?>
4
Exemple
1
2
3
4
vXhr.open("GET", "fichier.xml", false);
vXhr.send(null);
vXml vXhr.responseXML;
Exemple
1
2
3
4
5
6
: Charger un document XML sur le client
: Enregistrer un document XML sur le serveur (via PHP)
7
var vXml = document.getElement... //un node DOM
var vTxt = (new XMLSerializer()).serializeToString(vXml);
var vArgs = "xml=" + encodeURIComponent(vTxt);
vXhr.open("POST", "saveXml.php", false);
vXhr.send(vArgs);
1
2
3
4
5
6
<?php
$xml= $_POST["xml"];
$dom = new DomDocument();
$dom->loadXML($xml);
$dom->save('src.xml');
?>
Syntaxe
1
eval(vXhr.responseText);
Permet au client d’exécuter une instruction JavaScript qui aura été générée par le
serveur PHP (par exemple un compte-rendu d'exécution).
Complément
http://www.xul.fr/Objet-XMLHttpRequest.html25
25 - http://www.xul.fr/Objet-XMLHttpRequest.html
15
D. XMLSerializer : Sérialiser un DOM
1
var xmlString = new XMLSerializer().serializeToString(Node);
16
16
IV -
Exercices
IV
Travaux pratiques DOM et JavaScript
19
A. Travaux pratiques DOM et JavaScript
1. "Hello World !" en JavaScript
Question 1
[Solution n°1 p 23]
Créer un fichier HTML contenant un bouton. Ajouter la fonction JavaScript qui
permet d'afficher "Hello World !" lorsque l'on clique sur le bouton.
Question 2
Ajouter un champ de saisie texte au fichier HTML. Ajouter la fonction JavaScript qui
permet d'afficher le contenu de ce champ de saisie lorsque l'on clique sur le bouton.
2. Manipulation du DOM en JavaScript
Soit le fichier HTML :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Mon titre</title>
<script type="text/javascript" src="lib.js"></script>
</head>
<body>
<h1 onClick="showHxContent(1)">Partie 1</h1>
<div id="title1" style="display:none">
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>
<h1 onClick="showHxContent(2)">Partie 2</h1>
<div id="title2" style="display:none">
<p>Mon premier paragraphe</p>
<p>Mon second paragraphe</p>
</div>
<p>
<input type="submit" value="Masquer" onClick="hideAllDivs()"/>
</p>
<p>
Titre n°: <input type="text" id="title"/>
17
Exercices
23
24
25
26
Exercices
<input type="submit" value="Afficher" onClick="alertTitle()"/>
</p>
</body>
</html>
Question 1
Écrire la fonction JavaScript showHxContent permettant d'afficher le contenu du div
correspondant au titre sur lequel on clique.
Indice :
1
2
3
4
function showHxContent (pNumber) {
vDiv = document.getElementById(...);
vDiv.style.display = "...";
}
Question 2
Écrire la fonction JavaScript hideAllDivs permettant de masquer le contenu de
tous les div du document.
Indice :
1
2
3
4
5
6
function hideAllDivs () {
vDivs = document.getElementsByTagName(...);
for (var i=0; i<vDivs...; i++) {
vDivs.item(i)...;
}
}
Question 3
Écrire la fonction alertTitle permettant d'afficher (avec la fonction JavaScript
alert) le contenu du énième titre, défini par le champ de saisie title.
Indice :
1
2
3
4
5
6
function alertTitle () {
vHx = document.getElementsByTagName(...);
vIndice = document.getElementById(...).value;
vIndice = vIndice - 1;
alert(...);
}
Question 4
Écrire la fonction deleteTitle permettant d'effacer le contenu du titre défini par le
champ title. (suppression du nœud fils de type texte)
Indice :
1
2
3
4
function deleteTitle () {
...
vHx.item(vIndice).removeChild(...);
}
18
18
Exercices
Question 5
Écrire la fonction defineTitle permettant d'affecter le contenu du titre défini par le
champ title avec la valeur "Nouveau titre". On testera que le titre a ou non déjà une
valeur (nœud texte) avant l'ajout, afin de la supprimer si besoin.
Indice :
1
2
3
4
5
6
7
8
function defineTitle () {
...
vText = document.createTextNode(...);
if (vHx.item(vIndice)...) {
...
}
vHx.item(vIndice).appendChild(...);
}
3. Un éditeur XML en JavaScript
L'objectif de ce TP est de réaliser un éditeur XML avec HTML et JavaScript.
Soit le fichier XHTML "editor.html" ci-après.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>

<head>
<title>Éditeur de document</title>
<script type="text/javascript" src="lib.js"></script>
</head>
<body id="body">
<h1>Édition</h1>
<form>
<p>Ajouter un paragraphe</p>
<input type="text" size="50" id="text"/>
<input type="button"
onclick="addPara(document.getElementById('text').value);"
value="ajouter"/>
<br/>
<input type="button" onclick="alertXml(document);"
value="Afficher DOM"/>
<br/>
<input type="button" onclick="saveXml();" value="Sérialiser
XML"/>
</form>
<hr>
<div id="visu">
<h1>Visualisation</h1>
<script type="text/javascript">
//ouvre le fichier XML sur le serveur
var xml = loadXml("src.xml");
//ouvre le fichier XSLT sur le serveur
var xsl = loadXml("xml2html.xsl");
//exécute le XSLT sur le XML
res=execXslt(xml,xsl);
//afficher le résultat
document.getElementById("visu").appendChild(res);
</script>
</div>
</body>
</html>
19
Exercices
Exercices
Question 1
Expliquer le fonctionnement de "editor.html".
Question 2
Créer un fichier XML avec un élément racine document contenant des éléments
paragraphe. Le placer sur un serveur Web et le rendre accessible en
lecture/écriture.
Indice :
1
2
3
4
5
<?xml version="1.0" encoding="UTF-8"?>
<document>
<paragraphe>Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Pellentesque sit ametlibero ac mauris egestas venenatis nec
vitae sapien. Vestibulum ante ipsum primis infaucibus orci luctus
et ultrices posuere cubilia Curae; Ut commodo, neque at
auctortincidunt, turpis quam molestie augue, sit amet mattis nibh
neque eget felis.</paragraphe>
<paragraphe>Donec a lectus sed augue pellentesque accumsan eu ac
justo. Etiam est urna, sagittisac cursus nec, placerat quis
velit.</paragraphe>
</document>
Question 3
Écrire les XSLT xml2html.xsl et html2xml.xsl, puis les déposer sur le serveur à
côté du fichier XML.
Question 4
Écrire les fonctions loadXml et alertXml (la seconde permettant de tester la
première).
Indice :
Pour
loadXml
utiliser
XMLHttpRequest :
xmlHttpRequest :
Communication avec le serveur
Pour alertXml utiliser XMLSerializer : XMLSerializer : Sérialiser un
DOM


Question 5
Écrire la fonction execXslt.
Indice :
Exécuter une XSLT
Question 6
Écrire la fonction addPara.
Question 7
Écrire la fonction saveXml permettant d'exécuter le fichier PHP ci-après.
1
2
<?php
//saveXml.php
20
20
Exercices
3
4
5
6
7
$xml= $_POST["xml"];
$dom = new DomDocument();
$dom->loadXML($xml);
$dom->save('src.xml');
?>
21
Solution des
exercices
> Solution n°1 (exercice p. 17)
hw.html
1
2
3
4
5
6
7
8
9
10
<html>
<head>
<title>Hello World !</title>
<script type="text/javascript" src="hw.js"></script>
</head>
<body>
<input type="button" onClick="hw()" value="Clic me !"/>
</body>
</html>
hw.js
1
2
3
function hw () {
alert("Hello World")
}
hw.html
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Hello World !</title>
<script type="text/javascript" src="hw.js"></script>
</head>
<body>
<input type="text" id="text"/>
<input type="button" onClick="hw2()" value="Clic me !"/>
</body>
</html>
hw.js
1
2
3
function hw2() {
alert (document.getElementById('text').value)
}
23
1
2
3
4
function showHxContent (pNumber) {
vDiv = document.getElementById("title" + pNumber);
vDiv.style.display = "block";
}
1
2
3
4
5
6
function hideAllDivs () {
vDivs = document.getElementsByTagName("div");
for (var i=0; i<vDivs.length; i++) {
vDivs.item(i).style.display="none";
}
}
1
2
3
4
5
6
function alertTitle () {
vHx = document.getElementsByTagName("h1");
vIndice = document.getElementById("title").value;
alert(vHx.item(vIndice).firstChild.data);
}
1
2
3
4
5
6
function deleteTitle () {
vHx.item(vIndice).removeChild(vHx.item(vIndice).firstChild);
}
1
2
3
4
5
6
7
8
9
10
function defineTitle () {
vText = document.createTextNode("Nouveau titre");
if (vHx.item(vIndice).hasChildNodes()) {
vHx.item(vIndice).removeChild(vHx.item(vIndice).firstChild);
}
vHx.item(vIndice).appendChild(vText);
}
1. Après avoir affiché les éléments statiques, le script charge un fichier XML
situé sur le serveur (src.xml).
2. Il lui applique une XSLT située sur le serveur pour le transformer en HTML
24
24
(xml2html.xsl).
3. Il affiche le résultat dans un div de la page (<div id="visu">).
4. Le formulaire propose de :
a. modifier le DOM du HTML en JavaScript (function addPara()) ;
b. afficher le code HTML correspondant au DOM courant (function
alertXml(document)) ;
c. sérialiser le DOM sur le serveur, à la place du fichier XML source
(function saveXml ()) :
i. en appliquant une XSLT inverse de la première (html2xml.xsl),
ii. puis en postant le flux XML obtenu à une page PHP (saveXml.php),
iii. qui écrase le fichier src.xml avec la nouvelle sérialisation du DOM.
html2xml.xsl
1
2
3
4
5
6
7
8
9
10
11
12
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="xml"/>
<xsl:template match="div">
<document>
<xsl:apply-templates select="p"/>
</document>
</xsl:template>
<xsl:template match="p">
<paragraphe><xsl:value-of select="."/></paragraphe>
</xsl:template>
</xsl:stylesheet>
xml2html.xsl
1
2
3
4
5
6
7
8
9
10
11
12
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
version="1.0">
<xsl:output method="html"/>
<xsl:template match="document">
<div id="srcXml">
<xsl:apply-templates select="paragraphe"/>
</div>
</xsl:template>
<xsl:template match="paragraphe">
<p><xsl:value-of select="."/></p>
</xsl:template>
</xsl:stylesheet>
1
2
3
4
5
6
7
8
9
10
function loadXml (pPath){
vXhr.open("GET", pPath, false);
vXhr.send(null);
return rXml = vXhr.responseXML;
}
function alertXml (pDom) {
var xmlString = new XMLSerializer().serializeToString(pDom);
alert(xmlString);
}
25
1
2
3
4
5
function execXslt (pXml, pXsl) {
var proc = new XSLTProcessor();
proc.importStylesheet(pXsl);
return proc.transformToFragment(pXml,document);
}
1
2
3
4
5
function addPara (pText) {
vNewP = document.createElement("p");
vNewP.appendChild(document.createTextNode(pText));
document.getElementById("srcXml").appendChild(vNewP);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
function saveXml () {
var xsl = loadXml("html2xml.xsl");
var xml = document.getElementById("srcXml");
var proc = new XSLTProcessor();
proc.importStylesheet(xsl);
var res = proc.transformToDocument(xml);
var resTxt = (new XMLSerializer()).serializeToString(res);
var data = "xml=" + encodeURIComponent(resTxt);
vXhr.open("POST", "saveXml.php", false);
vXhr.send(data);
}
26
26
Bibliographie
[Brillant07] ALEXANDRE BRILLANT, XML : Cours et exercices, Eyrolles, 2007 [ISBN 978-2212126914]
27
Contenus annexes
- L'arbre du document XML
Il est possible de représenter un document XML sous forme d'arbre, tel que :

L'arbre possède une racine / qui a comme fils l'élément racine

l'élément racine est l'élément du document XML qui contient tous les autres

chaque nœud a comme fils les éléments et le texte qu'il contient, ainsi que
ses attributs.
Exemple
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<document modele="ULCoursGeneral" code="BP-Incendie3_S1_E2_UL1">
<entete>
<identification>
<titre>L'assurance de la responsabilité de voisinage</titre>
<date>21/02/01</date>
<auteur>AEA</auteur>
<version>1.00</version>
</identification>
</entete>
<corps>
<contenu>
<paragraphe>Cette garantie est appelée : recours des voisins et
des tiers.</paragraphe>
<remarque>
<paragraphe>L'image suivante <ressource URIsrc="img07.jpg"
titre="Recours des voisins et des tiers" type="image"/> montre la
garantie.</paragraphe>
</remarque>
</contenu>
</corps>
</document>
Exemple
1
2
3
4
5
6
7
8
9
10
11
12
: Fichier XML
: Arbre XML
/
|document
|@modele = "ULCoursGeneral"
|@code = "BP-Incendie3_S1_E2_UL1"
|entete
|identification
|titre
|text() = "L'assurance de ..."
|date
|text() = "21/02/01"
|auteur
|text() = "AEA"
29
Contenus annexes
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Contenus annexes
|version
|text() = "1.00"
|corps
|contenu
|paragraphe
|text() = "Cette garantie ..."
|remarque
|paragraphe
|text() = "L'image suivante"
|ressource
|@URIsrc = "img07.jpg"
|@titre = "Recours des voisins..."
|@type = "image"
|text() = "montre la garantie."
Remarque : Ordre des nœuds
L'ensemble des nœuds de l'arbre d'un document est muni d'un ordre, qui est celui
de l'ordre dans le document XML sérialisé.
30
30

L`API DOM : Document Object Model

Transcription

Documents pareils

Utilisation du navigateur Internet Explorer 6

la berline evenement

programmeur javascript / ajax

Exam correction

Télécharger la plaquette, les dates

SAINT-PIERRE-et-MIQUELON - Observatoire de l`Outre Mer

L I S B O N N E E N B L E U

lisbonnesauvage - Dom Carlos Liberty

Conférence “JavaScript Everywhere” à Boston le 15 octobre, le nom

Concepteur/développeur web junior