XML DOM

 

What is the DOM?

The Document Object Model (DOM) defines a standard for accessing and manipulating documents:

The HTML DOM defines a standard way for accessing and manipulating HTML documents. It presents an HTML document as a tree-structure.

The XML DOM defines a standard way for accessing and manipulating XML documents. It presents an XML document as a tree-structure.

The HTML DOM

All HTML elements can be accessed through the HTML DOM.

This example changes the value of an HTML element with id="demo":

<h1 id="demo">This is a Heading</h1>


<button type="button"
onclick="document.getElementById('demo').innerHTML = 'Hello World!'">Click Me!

</button>


The XML DOM

All XML elements can be accessed through the XML DOM.

BOOKS XML

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>

  <book category="cooking">
    <title lang="en">Everyday Italian</title>
    <author>Giada De Laurentiis</author>
    <year>2005</year>
    <price>30.00</price>
  </book>

  <book category="children">
    <title lang="en">Harry Potter</title>
    <author>J K. Rowling</author>
    <year>2005</year>
    <price>29.99</price>
  </book>

</bookstore>

This code retrieves the text value of the first <title> element in an XML document:

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

This example loads a text string into an XML DOM object, and extracts the info from it with JavaScript:

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