CSC 570 XML Programming

DOCUMENT OBJECT
MODEL (DOM)
What is DOM?
The XML Document Object Model (DOM) is:
A standard for accessing and manipulating XML document
A standard programming interface for XML, eg. javascript
Platform and language independent
A W3C standard

The XML DOM defines the objects and properties of all

XML elements, and the methods (interface) to access
them.

In other words: The XML DOM is a standard for how to

get, change, add, or delete XML elements.

Compiled by Anis Shobirin Abdullah Sani

 In this example, we use javascript to

What is DOM? access XML document (books.xml)

Compiled by Anis Shobirin Abdullah Sani

DOM Nodes
Everything in an XML document is a
node.
The entire document is a document node
Every XML element is an element node
The text in the XML elements are text nodes
Every attribute is an attribute node
Comments are comment nodes

Compiled by Anis Shobirin Abdullah Sani

DOM Node Tree
The XML DOM views an XML document as
a node-tree.
All nodes can be accessed through the tree.
Their contents can be modified or deleted,
and new elements can be created.
All the nodes in the tree have a relationship
to each other.
The tree starts at the root node and
branches out to the text nodes at the lowest
level of the tree

Compiled by Anis Shobirin Abdullah Sani

 Example DOM node-tree
<?xmlversion="1.0"encoding="UTF-8"?>
<bookstore>
<bookcategory="cooking">
<titlelang="en">EverydayItalian</title>
<author>GiadaDeLaurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>

Compiled by Anis Shobirin Abdullah Sani

DOM node tree
relationship
The terms parent, child, and sibling are used to
describe the relationships. Parent nodes have
children. Children on the same level are called
siblings (brothers or sisters).

In a node tree, the top node is called the root

Every node, except the root, has exactly one
parent node
A node can have any number of children
A leaf is a node with no children
Siblings are nodes with the same parent

Compiled by Anis Shobirin Abdullah Sani

DOM node tree
relationship

Compiled by Anis Shobirin Abdullah Sani

How DOM access nodes
A node can be access in three ways:
By using the getElementsByTagName()
method
By looping through (traversing) the nodes
tree.
By navigating the node tree, using the node
relationships.

Compiled by Anis Shobirin Abdullah Sani

How DOM access nodes
getElementsByTagName() method
getElementsByTagName() returns all
elements with a specified tag name.
Syntax;
node.getElementsByTagName("tagname");
Example

xmlDoc=loadXMLDoc("sample.xml");

x=xmlDoc.getElementsByTagName("head")[0].childNodes;

document.write(x.nodeValue);

Compiled by Anis Shobirin Abdullah Sani

How DOM access nodes
Traversing
Access nodes through loops
Example

xmlDoc=loadXMLDoc("sample.xml");

x=xmlDoc.documentElement.childNodes;

for(i=0;i<x.length;i++)
{
if(x[i].nodeType==1){//Processonlyelementnodes(type1)
document.write(x[i].nodeName);
document.write("");
}
}

Compiled by Anis Shobirin Abdullah Sani

How DOM access nodes
node relationships
navigates the node tree using the node
relationships.
Example
xmlDoc=loadXMLDoc(sample.xml");

x=xmlDoc.getElementsByTagName("head")[0].childNodes;
y=xmlDoc.getElementsByTagName("head")[0].firstChild;

for(i=0;i<x.length;i++)
{
if(y.nodeType==1){//Processonlyelementnodes(type1)
document.write(y.nodeName+"");
}
y=y.nextSibling;
}

Compiled by Anis Shobirin Abdullah Sani

Nodes Property
The nodeName Property

The nodeName property specifies the name of a node.

nodeName is read-only
nodeName of an element node is the same as the tag name
nodeName of an attribute node is the attribute name
nodeName of a text node is always #text
nodeName of the document node is always #document

The nodeValue Property

The nodeValue property specifies the value of a node.

nodeValue for element nodes is undefined
nodeValue for text nodes is the text itself
nodeValue for attribute nodes is the attribute value

Compiled by Anis Shobirin Abdullah Sani

Nodes Property
The documentElement Property
The documentElement property of the XML document is
the root node.

The nodeType Property

The nodeType property specifies the type of node.
nodeType is read only.

Compiled by Anis Shobirin Abdullah Sani

Other XML DOM
Properties
These are some typical DOM properties:
x.parentNode - the parent node of x
x.childNodes - the child nodes of x
x.attributes - the attributes nodes of x
XML DOM Methods
Methods are often referred to as
something that is done (i.e. delete
"book").
Some are built in some are create on
the fly.
Getting the value of a
node
The getElementsByTagName() method
returns a node list containing all
elements with the specified tag name in
the same order as they appear in the
source document.
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0];
[object Element]

x=xmlDoc.getElementsByTagName("title")[0];
y=x.childNodes[0];
Everyday Italian
 Getting the value of a
node

Even if the HTML document contains only ONE <h1> element you still have to
specify the array index [0], because the getElementsByTagName() method
always returns an array.
Getting an Attribute Node
The getAttributeNode() method returns
an attribute node.
The following code retrieves attribute
node of the "lang" attribute of the first
<title> element:
x=xmlDoc.getElementsByTagName("title")[0].getAttributeNode("lang");
document.write(x)
[object Attr]
Getting the Value of an Attribute

The getAttribute() method returns an

attribute value.
The following code retrieves the text
value of the "lang" attribute of the first
<title> element:
xmlDoc=loadXMLDoc("books.xml");
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang"); en
Other methods
Replace nodes
x.replaceChild(new,old) - replace old node with new
node
Add nodes
x.appendChild(node) - insert a child node to x
Clone Nodes
node.cloneNode(true) create a copy of a node
Remove nodes
x.removeChild(node) - remove a child node from x
Example DOM Usage
Before action

After action

HTML file PHP file

Compiled by Anis Shobirin Abdullah Sani