XML DOM Tutorial

What is DOM?

For accessing and manipulating documents, a standard is defined by the DOM.

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

For accessing and manipulating HTML documents, the HTML DOM defines a standard way and presents an HTML document as a tree-structure. For accessing and manipulating XML documents, the XML DOM defines a standard way and presents an XML document as a tree-structure. For working with HTML or XML, a good understanding of DOM is necessary.

The HTML DOM:

Through the HTML DOM, we can access all the HTML elements.

Example:

<!DOCTYPE html>
<html>
<body>
 
<h1 id="100">Hello World!!</h1>
 
<p>How are you?</p>
 
<script>
document.getElementById("100").innerHTML = "Nice to see you!";
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, the value of an HTML element changes with id=”100″, i.e., the first <h1> element in the HTML document.

Example:

<!DOCTYPE html>
<html>
<body>
 
<h1>Hello World!!</h1>
 
<h1>Hello</h1>
 
<p>How are you?</p>
 
<script>
document.getElementsByTagName("h1")[1].innerHTML = "Nice to see you!";
</script>
 
</body>
</html>

Output:

Explanation:

In the above example, we are using the getElementsByTagName() method which always returns an array. Thus, we will have to specify the array index [1], even if the HTML document contains a single <h1> element.

The XML DOM:

The way to get, change, add, and delete XML elements is defined by the XML DOM as a standard. Through the XML DOM, we can access all the XML elements. It is a standard object model and a standard programming interface for XML. It is platform- and language-independent and is a W3C standard.

Get the Value of an XML Element:

To get the text value of the first <title> element in an XML document, use the below code.

Example:

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

Loading an XML File:

Books.xml:

<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
 
  <book category="Child">
    <title lang="en">ABC</title>
    <author>Author Name</author>
    <year>2020</year>
    <price>100.00</price>
  </book>
 
  <book category="IT">
    <title lang="en">XQuery Book</title>
    <author>Author 1</author>
    <author>Author 2</author>
    <author>Author 3</author>
    <author>Author 4</author>
    <year>2004</year>
    <price>350.00</price>
  </book>
 
</bookstore>

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="hello"></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("hello").innerHTML =
    xmlDoc.getElementsByTagName("title")[1].childNodes[0].nodeValue;
}
</script>
 
</body>
</html>

Output:

XQuery Book

Explanation:

In the above example, we are reading “books.xml” into xmlDoc. The text value of the first <title> element in books.xml is then retrieved.

  • xmlDoc: Used to define the XML DOM object created by the parser.
  • getElementsByTagName(“title”)[0]: Used to get the first <title> element.
  • childNodes[0]: Used to get the first child of the <title> element (the text node)
  • nodeValue: Used to get the value of the node (the text itself).

Loading an XML String:

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

Example:

<!DOCTYPE html>
<html>
<body>
 
<p id="demo"></p>
 
<script>
var parser, xmlDoc;
var text = "<bookstore><book>" +
"<title>ABC</title>" +
"<author>Author Name</author>" +
"<price>100.00</price>" +
"</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>

Output:

Explanation:

In the above example, we are loading a text string into an XML DOM object. We then extract the info from it with JavaScript.

Programming Interface:

XML is modeled as a set of node objects by DOM. To access the nodes we can use JavaScript or other programming languages. Here, we are using JavaScript. A set of standard properties and methods defines the programming interface to the DOM.

XML DOM Properties:

Some typical DOM properties are listed below. Here, x is a node object.

  • 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 attributes nodes of x.

XML DOM Methods:

Some typical DOM methods are listed below. Here, x is a node object.

  • x.getElementsByTagName(name): Used to get all elements with a specified tag name.
  • x.appendChild(node): Used to insert a child node to x.
  • x.removeChild(node): Used to remove a child node from x.

XML DOM Tutorial List