XML DOM tutorial

What is DOM?

The DOM defines standards for accessing and manipulating documents:

“The W3C Document Object Model (DOM) is a platform- and language-independent interface that allows programs and scripts to dynamically access and update the content, structure, and style of documents.”

The HTML DOM defines standard methods for accessing and manipulating HTML documents. It presents the HTML document as a tree structure.

The XML DOM defines standard methods for accessing and manipulating XML documents. It presents the XML document as a tree structure.

Understanding DOM is essential for anyone who uses HTML or XML.

HTML DOM

All HTML elements can be accessed through the HTML DOM.

Exemple 1

Cet exemple modifie la valeur de l'élément HTML avec id="demo" :

<h1 id="demo">Voici le titre</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Essayez-le vous-même

Exemple 2

Cet exemple modifie la valeur de l'élément <h1> premier dans le document HTML :

<h1>Voici le titre</h1>
<h1>Voici le titre</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Essayez-le vous-même

Attention :Même si le document HTML ne contient qu'un élément <h1>, vous devez toujours spécifier l'index d'array [0], car la méthode getElementsByTagName() retourne toujours un tableau.

Vous pouvez apprendre plus sur HTML DOM dans notre tutoriel JavaScript.

DOM XML

Tous les éléments XML peuvent être accédés via XML DOM.

XML DOM est :

  • Modèle d'objets standard de XML
  • Interface de programmation standard de XML
  • Indépendante de la plateforme et du langage
  • Norme W3C

En d'autres termes : XML DOM est une norme standard sur la manière d'obtenir, de modifier, d'ajouter ou de supprimer des éléments XML.

Obtention de la valeur d'un élément XML

Cet exemple recherche la valeur du texte de l'élément <title> premier dans le document XML :

Exemple

txt = xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;

Chargement du fichier XML

Le fichier XML utilisé dans cet exemple est books.xml.

Cet exemple lit "books.xml" dans xmlDoc et recherche la valeur du texte de l'élément <title> premier de 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>

Essayez-le vous-même

Explication de l'exemple

  1. xmlDoc - Objet DOM XML créé par le parseur
  2. getElementsByTagName("title")[0] - Obtenir le premier élément <title>
  3. childNodes[0] - Premier noeud enfant de l'élément <title> (noeud texte)
  4. nodeValue - La valeur du noeud (texte lui-même)

Charger une chaîne XML

Dans cet exemple, une chaîne de texte est chargée dans un objet DOM XML, et des informations sont extraites de celle-ci à l'aide de JavaScript :

Exemple

<html>
<body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>雅舍谈吃</title>" +
"<author>梁实秋</author>" +
"<year>2013</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>

Essayez-le vous-même

Interface de programmation

DOM modélise XML en un ensemble d'objets de noeuds. Les noeuds peuvent être accédés à l'aide de JavaScript ou d'autres langages de programmation. Dans ce tutoriel, nous utilisons JavaScript.

L'interface de programmation DOM est définie par un ensemble de propriétés et de méthodes standard.

PropriétésCela fait généralement référence à ce que sont les choses (par exemple, nodename est "book").

MéthodesCela fait généralement référence à ce que l'on peut faire (par exemple, supprimer l'action "book").

Propriétés XML DOM

Voici quelques propriétés DOM typiques :

  • x.nodeName - le nom de x
  • x.nodeValue - la valeur de x
  • x.parentNode - le noeud parent de x
  • x.childNodes - les noeuds enfants de x
  • x.attributes - les noeuds d'attributs de x

Remarque :Dans la liste ci-dessus, x est un objet de noeud.

Méthodes XML DOM

  • x.getElementsByTagName(name) - Obtenir tous les éléments avec un nom de balise spécifique
  • x.appendChild(node) - Insérer un sous-nœud dans x
  • x.removeChild(node) - Supprimer un sous-nœud de x

Remarque :Dans la liste ci-dessus,x Est un objet de nœud.