![Page 1: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/1.jpg)
XML DOM
Taha Zerrouki
![Page 2: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/2.jpg)
2
Définition
Le Document de référence Objet Modèle (DOM)
est une norme de W3C.
Il définit une norme pour l'accès aux documents comme HTML et XML.
![Page 3: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/3.jpg)
3
Définition par W3C
Le modèle objet de document (DOM) est :
une interface de programmation d'application (API)
pour les documents HTML et XML.
Il définit la structure logique des documents
et la façon dont un document est accessible et manipulé.
![Page 4: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/4.jpg)
4
Niveaux
DOM définit les objets et les propriétés et méthodes (interface) pour accéder à tous les éléments XML. Le DOM est séparé en 3 parties / niveaux différents:
DOM de base- modèle standard pour tout document structuré
XML DOM - modèle standard pour les documents XML
HTML DOM - modèle standard pour les documents HTML
![Page 5: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/5.jpg)
5
XML DOM
XML DOM fournit également :
une API qui permet à un développeur :
• D'ajouter
• Modifier
• déplacer
• Supprimer
des nœuds en tout point de l'arbre afin de créer une application.
![Page 6: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/6.jpg)
6
XML DOM
![Page 7: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/7.jpg)
7
Avantages
DOM XML est le langage et la plate-forme indépendante
XML DOM est traversable :
• Les informations contenues dans DOM XML est organisé dans une hiérarchie qui permet développeur de naviguer dans la hiérarchie à la recherche d'informations spécifiques.
XML DOM est modifiable :
• Il est de nature dynamique fournissant développeur un champ pour ajouter, modifier, déplacer ou supprimer des nœuds en tout point de l'arbre.
![Page 8: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/8.jpg)
8
Inconvenient
Il consomme plus de mémoire :
• (si la structure XML est grand) comme programme écrit une fois reste en mémoire tout le temps jusqu'à ce que et à moins enlevé explicitement.
![Page 9: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/9.jpg)
9
Structure
Le modèle objet DOM• Structure arborescente d’éléments
• Un élément composé d’un ou plusieurs nœuds:• D’autres éléments
• Des instructions de traitement,
• Ou encore de texte
• Mais aussi des attributs
Douze types de nœuds • Document (racine en xml)
• Comment
• Attribute
•
ProcessingInstruction
<?xml:stylesheet ...>
DocumentType
<!DOCTYPE ...>
Element
<personne ....>
....
Document
Child
Text
Le meilleur restaurant
Node
![Page 10: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/10.jpg)
10
Noeud
Chaque noeud XML est transformé en un objet• Définition
• Propriétés
• Des méthodes
Les méthodes et propriétés permettent notamment :• Créer (createNode,..),
• Modifier (repalceChild,…)
• Supprimer (remove,…)
• Extraire des données (get,…) de n’importe quel élément ou contenu d’un document XML
![Page 11: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/11.jpg)
11
Les relations
DOM définit les types de relation entre chaque nœud, et des directions de déplacement dans une arborescence XML
Les propriétés:• parentNode retourne le père
• childNodes retourne les enfants
• firstChild retourne le premier enfant
• lastChild retourne le dernier enfant
• previousSibling retourne le frère précedent
• nextSibling retourne le frère suivant du nœud courant
![Page 12: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/12.jpg)
12
Dom relations
ChildNodes
ParentNode
LastChildFirstChild
![Page 13: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/13.jpg)
13
Dom relations
NextSiblingPreviousSibling
![Page 14: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/14.jpg)
14
![Page 15: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/15.jpg)
15
XML DOM Properties
x.nodeName
x.nodeValue
x.parentNode
x.childNodes
x.attributes
![Page 16: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/16.jpg)
16
XML DOM Methodes
x.getElementsByTagName(name)
x.appendChild(node)
x.removeChild(node)
![Page 17: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/17.jpg)
17
Types des Noeuds
Document
Element
Attribute
Text
Comment
![Page 18: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/18.jpg)
18
Type Noeud
Les types les plus courants de nœuds en XML sont:
Node Document:
• Complete structure du document XML est un nœud de document.
Node Element:
• Chaque élément XML est un nœud d'élément.Ceci est également le seul type de nœud qui peut avoir des attributs.
Attribut Node:
• Chaque attribut est considéré comme un nœud d'attribut. Ils contiennent des informations sur un noeud d'élément, mais ne sont pas réellement être considérés comme des enfants de l'élément.
Noeud texte:
• Les documents textes sont considérés comme nœud de texte.Il peut être constitué de plus d'informations ou de l'espace tout blanc.
![Page 19: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/19.jpg)
19
Type Noeud
Certains types moins communs de nœuds sont:
Node CData:
• Ce noeud contient des informations qui ne devraient pas être analysées par l'analyseur. Au lieu de cela, il devrait simplement être transmis sous forme de texte.
Commentaire Node:
• sont généralement ignorés par l'application.
Node Traitement Instructions:
• Ce nœud contient des informations visant spécifiquement à l'application.
Document de Node Fragments
Node Entités
Nœuds de référence de l' entité
Node Notations
![Page 20: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/20.jpg)
20
Exemple
![Page 21: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/21.jpg)
21
Manipuler un fichier
Charger un fichier
Construire l’arbre
Parcourir l’arbre
Modifier l’arbre
![Page 22: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/22.jpg)
22
Charger un fichier / Python
#testdom2.pyDATA_FILE = 'TP/annuaire-v0.2.xml'import xml.dom.minidom as minidomprint xmldoc.toxml()try: xmldoc = minidom.parse(DATA_FILE)except: print "Can't Open the file",DATA_FILE
![Page 23: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/23.jpg)
23
Manipuler un fichier
Charger un fichier
Construire l’arbre
Parcourir l’arbre
Modifier l’arbre
![Page 24: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/24.jpg)
24
Charger un fichier / Python
#testdom2.pyDATA_FILE = 'TP/annuaire-v0.2.xml'import xml.dom.minidom as minidomprint xmldoc.toxml()try: xmldoc = minidom.parse(DATA_FILE)except: print "Can't Open the file",DATA_FILE
![Page 25: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/25.jpg)
25
Manipuler un fichier
Charger un fichier
Construire l’arbre
Parcourir l’arbre
Modifier l’arbre
![Page 26: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/26.jpg)
26
Parcourir l’arbre
Voici les trois façons dont vous pouvez accéder aux nœuds:
En utilisant la méthode getElementsByTagName ()
En boucle à travers ou traversant à travers des noeuds arbre
En naviguant dans l'arborescence du noeud, en utilisant les relations de nœuds.
![Page 27: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/27.jpg)
27
Parcourir l’arbre
def display_tel(xmldoc): # display only telephones # get the tel list telephones = xmldoc.getElementsByTagName('telephone') # display tel by tel for tel in telephones: print "N°:",tel.firstChild.data print "Type tel:",tel.getAttribute("type")
![Page 28: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/28.jpg)
28
Parcourir l’arbre
def display_tel(xmldoc): # display only telephones # get the tel list telephones = xmldoc.getElementsByTagName('telephone') # display tel by tel for tel in telephones: print "N°:",tel.firstChild.data print "Type tel:",tel.getAttribute("type")
Exercice: Ecrire une focntion pour afficher les noms et leurs villes
![Page 29: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/29.jpg)
29
Manipuler un fichier
Charger un fichier
Construire l’arbre
Parcourir l’arbre
Modifier l’arbre
![Page 30: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/30.jpg)
30
Modifier l’arbre
def add_id_personne(xmldoc): #get the personnes list personnes = xmldoc.getElementsByTagName('personne') # display personne by personne Cpt = 1 for personne in personnes: personne.setAttribute('id', str(cpt)) cpt += 1
![Page 31: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/31.jpg)
31
Modifier l’arbre
newEle = xmlDoc.createElement("username");newText = xmlDoc.createTextNode("perso");newEle.appendChild(newText);
personne.appendChild(newEle); # remove l’element nomn = personne.getElementsByTagName('nom')[0]personne.removeChild(n)
![Page 32: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/32.jpg)
32
Modifier l’arbre (resultat)
<personne> <nom>Ribiai</nom><prenom>Hamada</prenom><adresse><rue>18 avenue du Ibn Badis</rue><code-postale>10000</code-postale><ville>Bouira</ville></adresse></personne>
<personne id="5">
<prenom>Hamada</prenom><adresse> <rue>18 avenue du Ibn Badis</rue> <code-postale>10000</code-postale> <ville>Bouira</ville> </adresse> <age>24</age></personne>
![Page 33: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/33.jpg)
33
Exemple en Javascript
![Page 34: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/34.jpg)
34
Script JavaScript
<script>
//modify the HTML
document.getElementById("FirstName").innerHTML= "Taha";
document.getElementById("LastName").innerHTML= "Zerrouki";
</script>
Exercice:
Afficher le tel et la ville
![Page 35: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/35.jpg)
35
Créer des éléments
// Create a <p> element
var para = document.createElement("H1"); // Create a text node var t = document.createTextNode("This is a paragraph"); // Append the text to <p> para.appendChild(t); para.setAttribute("align","center"); document.body.appendChild(para);
![Page 36: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/36.jpg)
36
Charger des données XML
<script> if (window.XMLHttpRequest) //if browser supports XMLHttpRequest {// Create an instance of XMLHttpRequest object. code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // sets and sends the request for calling "node.xml" xmlhttp.open("GET","annuaire-v0.2.xml",async = false); xmlhttp.send(); // sets and returns the content as XML DOM xmlDoc=xmlhttp.responseXML; // parseing dom </script>
![Page 37: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/37.jpg)
37
Traiter des données XML
//parsing the DOM object document.getElementById("FirstName").innerHTML = xmlDoc.getElementsByTagName("nom")[0].childNodes[0].nodeValue; </script>
Exercice:Afficher le prénom, tel, ville
![Page 38: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/38.jpg)
38
Affichage Table
<table id="table_personnes" border=1>
<tr> <th>Nom</th><th>Prénom</th><th>Phone</th><th>Ville</th></tr>
</table>
</body>
![Page 39: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/39.jpg)
39
Affichage Table
Utiliser DOM pour créer un tableau dynamique
XML
![Page 40: XML DOM - WordPress.com · 3 Définition par W3C Le modèle objet de document (DOM) est : une interface de programmation d'application (API) pour les documents HTML et XML. Il définit](https://reader034.vdocuments.pub/reader034/viewer/2022043006/5f8fe1df07ce3c13170be4b7/html5/thumbnails/40.jpg)
40
Affichage Table
var identities = xmlDoc.getElementsByTagName("identite")var table = document.getElementById("table_personnes") for(i in identities) { var tr = document.createElement("tr"); // create a row var td = document.createElement("td"); // create a row td.innerHTML = identities[i].getElementsByTagName("nom")[0].childNodes[0].nodeValue; tr.appendChild(td); // add td to tr // redo for another data tr.appendChild(td); table.appendChild(tr); }
Exercice : Afficher le nom, telephone et ville