Tutoriel XML DOM
DOM XML
Qu'est-ce que le DOM ?
Le DOM définit une norme d'accès et de manipulation des documents :
Le DOM HTML définit une méthode standard d'accès et de manipulation des documents HTML. Il présente un document HTML sous forme d'arborescence.
Le DOM XML définit une méthode standard d'accès et de manipulation des documents XML. Il présente un document XML sous forme d'arborescence.
Comprendre le DOM est indispensable pour quiconque travaille avec HTML ou XML.
Le DOM HTML
Tous les éléments HTML sont accessibles via le DOM HTML.
Cet exemple change la valeur d'un élément HTML avec id="demo":
Exemple
<h1 id="demo">This is a Heading</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
Cet exemple modifie la valeur du premier élément <h1> dans un document HTML :
Exemple
<h1>This is a Heading</h1>
<h1>This is a Heading</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>
Remarque : Même si le document HTML ne contient qu'UN seul élément <h1>, vous devez toujours spécifier l'indice de tableau [0], car la méthode getElementsByTagName() renvoie toujours un tableau.
Vous pouvez en apprendre beaucoup plus sur le DOM HTML dans notre tutoriel JavaScript .
Le DOM XML
Tous les éléments XML sont accessibles via le DOM XML.
Le DOM XML est :
- Un modèle d'objet standard pour XML
- Une interface de programmation standard pour XML
- Indépendant de la plate-forme et de la langue
- Une norme W3C
En d'autres termes : le DOM XML est une norme sur la manière d'obtenir, de modifier, d'ajouter ou de supprimer des éléments XML.
Obtenir la valeur d'un élément XML
Ce code récupère la valeur textuelle du premier élément <title> dans un document XML :
Exemple
txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
Chargement d'un fichier XML
Le fichier XML utilisé dans les exemples ci-dessous est books.xml .
Cet exemple lit "books.xml" dans xmlDoc et récupère la valeur textuelle du premier élément <title> dans books.xml :
Exemple
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this);
}
};
xhttp.open("GET", "books.xml", true);
xhttp.send();
function myFunction(xml) {
var xmlDoc = xml.responseXML;
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
}
</script>
</body>
</html>
Exemple expliqué
- xmlDoc - l'objet XML DOM créé par l'analyseur.
- getElementsByTagName("title")[0] - récupère le premier élément <title>
- childNodes[0] - le premier enfant de l'élément <title> (le nœud de texte)
- nodeValue - la valeur du nœud (le texte lui-même)
Chargement d'une chaîne XML
Cet exemple charge une chaîne de texte dans un objet DOM XML et en extrait les informations avec JavaScript :
Exemple
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Interface de programmation
Le DOM modélise XML comme un ensemble d'objets nœuds. Les nœuds sont accessibles avec JavaScript ou d'autres langages de programmation. Dans ce tutoriel, nous utilisons JavaScript.
L'interface de programmation du DOM est définie par un ensemble de propriétés et de méthodes standard.
Les propriétés sont souvent appelées quelque chose qui est (c'est-à-dire que le nom du nœud est "livre").
Les méthodes sont souvent appelées quelque chose qui est fait (c'est-à-dire supprimer "livre").
Propriétés DOM XML
Voici quelques propriétés DOM typiques :
- x.nodeName - le nom de x
- x.nodeValue - la valeur de x
- x.parentNode - le nœud parent de x
- x.childNodes - les nœuds enfants de x
- x.attributes - les nœuds d'attributs de x
Remarque : Dans la liste ci-dessus, x est un objet nœud.
Méthodes DOM XML
- x.getElementsByTagName( name ) - récupère tous les éléments avec un nom de balise spécifié
- x.appendChild( node ) - insère un nœud enfant à x
- x.removeChild( node ) - supprimer un nœud enfant de x
Remarque : Dans la liste ci-dessus, x est un objet nœud.