XML DOM

Taha Zerrouki

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.

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é.

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

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.

6

XML DOM

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.

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.

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

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

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

12

Dom relations

ChildNodes

ParentNode

LastChildFirstChild

13

Dom relations

NextSiblingPreviousSibling

14

15

XML DOM Properties

x.nodeName

x.nodeValue

x.parentNode

x.childNodes

x.attributes

16

XML DOM Methodes

x.getElementsByTagName(name)

x.appendChild(node)

x.removeChild(node)

17

Types des Noeuds

Document

Element

Attribute

Text

Comment

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.

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

20

Exemple

21

Manipuler un fichier

Charger un fichier

Construire l’arbre

Parcourir l’arbre

Modifier l’arbre

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

23

Manipuler un fichier

Charger un fichier

Construire l’arbre

Parcourir l’arbre

Modifier l’arbre

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

25

Manipuler un fichier

Charger un fichier

Construire l’arbre

Parcourir l’arbre

Modifier l’arbre

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.

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")

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

29

Manipuler un fichier

Charger un fichier

Construire l’arbre

Parcourir l’arbre

Modifier l’arbre

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

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)

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>

33

Exemple en Javascript

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

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);

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>

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

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>

39

Affichage Table

Utiliser DOM pour créer un tableau dynamique

XML

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