XML DOM - Properties and Methods

Attributes and methods define the programming interface for XML DOM.

Example

The following example uses an XML file books.xml.

Function loadXMLDoc(), located in external JavaScript, used to load XML file.

Function loadXMLString(), located in external JavaScript, used to load XML string.

Load and parse XML file
Load and parse XML string

Programming Interface

DOM simulates XML as a series of node interfaces. Nodes can be accessed using JavaScript or other programming languages. In this tutorial, we use JavaScript.

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

AttributeFrequently use in the way of 'What is something' (for example, the node name is "book").

MethodsAre often used in the way of 'doing something to something' (e.g., deleting the 'book' node).

XML DOM properties

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 the specified tag name
  • x.appendChild(node) - Insert a child node into x
  • x.removeChild(node) - Remove a child node from x

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

Example

JavaScript code to get text from the <title> element in books.xml:

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

After the execution of this statement, the value saved in txt is "Harry Potter".

Explanation:

  • xmlDoc - The XML DOM created by the parser
  • getElementsByTagName("title")[0] - The first <title> element
  • childNodes[0] - The first child node of the <title> element (text node)
  • nodeValue - The value of the node (the text itself)

In the above example, getElementsByTagName is a method, while childNodes and nodeValue are properties.

Parsing XML file - Cross-browser example

The following code snippet uses the loadXMLDoc function to load books.xml Load the XML parser and display the data of the first book:

xmlDoc=loadXMLDoc("books.xml");
document.write(xmlDoc.getElementsByTagName("title"))
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("author"))
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("year"))
[0].childNodes[0].nodeValue);

Output:

Harry Potter
J K. Rowling
2005

TIY

In the above example, we use childNodes[0] for each text node, even though each element has only one text node. This is because the getElementsByTagName() method always returns an array.

Parsing XML string - Cross-browser example

The following code loads and parses an XML string:

The following code snippet uses the loadXMLString function to load books.xml Load XML parser and display the data of the first book:

text="<bookstore>"
text=text+"<book>";
text=text+"<title>Harry Potter</title>";
text=text+"<author>J K. Rowling</author>";
text=text+"<year>2005</year>";
text=text+"</book>";
text=text+"</bookstore>";
xmlDoc=loadXMLString(text);
document.write(xmlDoc.getElementsByTagName("title"))
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("author"))
[0].childNodes[0].nodeValue);
document.write("<br />");
document.write(xmlDoc.getElementsByTagName("year"))
[0].childNodes[0].nodeValue);

Output:

Harry Potter
J K. Rowling
2005

TIY