XML DOM

What is DOM?

The Document Object Model (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."

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

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

Understanding DOM is essential for any developer using HTML or XML.

HTML DOM

All HTML elements can be accessed through HTML DOM.

The following example changes the value of the HTML element with id="demo":

Example

<h1 id="demo">This is the title</h1>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello World!'">
Please click me!
</button>

Try It Yourself

You can learn more about it in our JavaScript tutorial. HTML DOM Learn more.

XML DOM

All XML elements can be accessed through XML DOM.

Books.xml

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
  <book category="food">
    <title lang="zh">雅舍谈吃</title>
    <author>梁实秋</author>
    <year>2013</year>
    <price>35</price>
  </book>
  <book category="children">
    <title lang="zh">The Fantastic Mr. Fox</title>
    <author>Roald Dahl</author>
    <year>2009</year>
    <price>10.00</price>
  </book>
</bookstore>

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

Example

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

The XML DOM is a standard for how to get, change, add, and delete XML elements.

This example loads a text string into an XML DOM object and extracts information from it using JavaScript:

Example

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

Try It Yourself

You will learn about XML DOM More Content.