XML DOM Tutorial

What is DOM?

The DOM defines standard methods 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 HTML documents as a tree structure.

The XML DOM defines standard methods for accessing and manipulating XML documents. It presents XML documents 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.

Example 1

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

<h1 id="demo">This is the title</h1>
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

Try It Yourself

Example 2

This example changes the value of the first <h1> element in the HTML document:

<h1>This is the title</h1>
<h1>This is the title</h1>
<script>
document.getElementsByTagName("h1")[0].innerHTML = "Hello World!";
</script>

Try It Yourself

Note:Even if the HTML document only contains one <h1> element, you still need to specify the array index [0], because the getElementsByTagName() method always returns an array.

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

XML DOM

All XML elements can be accessed through XML DOM.

XML DOM is:

  • Standard object model for XML
  • Standard programming interface for XML
  • Independent of platform and language
  • W3C Standard

In other words: XML DOM is a standard about how to get, change, add, or delete XML elements.

Get the value of an XML element

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

Example

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

Loading XML file

The XML file used in the following example is books.xml.

This example reads "books.xml" into xmlDoc and retrieves the text value of the first <title> element in books.xml:

Example

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

Try It Yourself

Example Explanation

  1. xmlDoc - The XML DOM object created by the parser
  2. getElementsByTagName("title")[0] - Get the first <title> element
  3. childNodes[0] - The first child node of the <title> element
  4. nodeValue - The value of the node (the text itself)

Load XML string

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

Try It Yourself

Programming Interface

DOM models XML as a set of node objects. Nodes can be accessed using JavaScript or other programming languages. In this tutorial, we use JavaScript.

The programming interface of DOM is defined by a set of standard properties and methods.

PropertiesGenerally refers to what something is (such as nodename is "book").

MethodsGenerally refers to what can be done (such as the action of deleting "book").

XML DOM properties

These are some typical DOM properties:

  • x.nodeName - the name of x
  • x.nodeValue - the value of x
  • x.parentNode - the parent node of x
  • x.childNodes - the child nodes of x
  • x.attributes - the attribute node of x

Note:In the above list, x is a node object.

XML DOM Methods

  • x.getElementsByTagName(name) - Get all elements with a specified tag name
  • x.appendChild(node) - Insert a child node into x
  • x.removeChild(node) - Remove child nodes from x

Note:In the above list,x Is a node object.