XML DOM - Properties and Methods

Properties and methods define the programming interface to the XML DOM.

Examples

The examples below use the XML file books.xml.
A function, loadXMLDoc(), in an external JavaScript is used to load the XML file.
A function, loadXMLString(), in an external JavaScript is used to load the XML string.

Load and parse an XML file

Load and parse an XML string

Programming Interface

The DOM models XML as a set of node objects. The nodes can be accessed with JavaScript or other programming languages. In this tutorial we use JavaScript.

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

Properties are often referred to as something that is (i.e. nodename is "book").

Methods are often referred to as something that is done (i.e. delete "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 attributes nodes of x

Note: In the list above, 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 to x
• x.removeChild(node) - remove a child node from x

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

Example

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

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

After the execution of the statement, txt will hold the value "Everyday Italian"

Explained:

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

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

Parsing an XML File - A Cross browser Example

The following code fragment uses the loadXMLDoc function (described in the previous chapter) to load books.xml into the XML parser, and displays data from 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:

Everyday Italian
Giada De Laurentiis
2005

Try it yourself

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

Parsing an XML String - A Cross browser Example

The following code loads and parses an XML string:

The following code fragment uses the loadXMLString function (described in the previous chapter) to load books.xml into the XML parser, and displays data from the first book:

text="<bookstore>"
text=text+"<book>";
text=text+"<title>Everyday Italian</title>";
text=text+"<author>Giada De Laurentiis</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:

Everyday Italian
Giada De Laurentiis
2005

Try it yourself