Introduction of DOM XML _DOM DOM Nodes XML Parser XML Load Function Properties and Methods DOM

M Accessing Nodes XML DOM Node Information DOM Node List Manipulate Nodes

Introduction of DOM
The DOM is a W3C (World Wide Web Consortium) standard.
The DOM defines a standard for accessing documents like XML

and HTML The DOM is separated into 3 different parts / levels: Core DOM - standard model for any structured document XML DOM - standard model for XML documents HTML DOM - standard model for HTML documents The DOM defines the objects and properties of all document elements, and the methods (interface) to access them.

XML DOM
A standard object model for XML
A standard programming interface for XML Platform- and language-independent 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.

DOM Nodes
According to the DOM, everything in an XML document is a node.
The DOM says: 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

EXAMPLE
<bookstore> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="children"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>

Root node - <book store> .All other nodes in the document are contained within this tag. It holds the four <book > nodes. The first <book> node holds four nodes <title>,<author>,<year>,<price>.

XML Parser
What is Parser? Parser is a program, usually part of compiler, that receives input in the form of sequential source program instruction or markup tags or some other defined interface and breaks them up into parts that can be managed by other programming.
The XML DOM contains methods (functions) to traverse

XML trees, access, insert, and delete nodes. However, before an XML document can be accessed and manipulated, it must be loaded into an XML DOM object. An XML parser reads XML, and converts it into an XML DOM object that can be accessed with JavaScript. Most browsers have a built-in XML parser.

Creating a DOMParser:
To create a DOMParser object simply use new DOMParser().

Parsing XML: Once we have created a parser object, you can parse XML from a string using the parseFromString method:
Example: var parser = new DOMParser(); var doc = parser.parseFromString(stringContainingXMLSource, "application/xml");

XML Load Function

The code for loading XML documents can be stored in a function.
The loadXMLDoc() Function:

This method is used to check if the loaded XML document is well-formed.

The loadXMLString() Function:

Loads the XML string into xmlDoc .

Properties and methods

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:

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

Accessing Nodes
You can access a node in three ways:
By using the getElementsByTagName() method

By looping through (traversing) the nodes tree.

By navigating the node tree, using the node

relationships.

XML DOM Node Information

In the XML DOM, each node is an object.

Three important node properties are: nodeName nodeValue nodeType

The nodeName Property: The nodeName property specifies the name of a node.It is readonly. The nodeValue Property: The nodeValue property specifies the value of a node.It is undefined. The nodeType Property: The nodeType property specifies the Type of a node.It is read-only.

DOM Node List

When using properties or methods like childNodes or

getElementsByTagName(), a node list object is returned. A node list object represents a list of nodes, in the same order as in the XML. Nodes in the node list are accessed with index numbers starting from 0.

Manipulating Nodes
DOM Get values:

The nodeValue property is used to get the text value of a node. The getAttribute() method returns the value of an attribute. The nodeValue property is used to change a node value. The setAttribute() method is used to change an attribute value. The removeChild() method removes a specified node. The removeAttribute() method removes a specified attribute. The replaceChild() method replaces a specified node. The nodeValue property replaces text in a text node.

DOM Change nodes:

DOM Remove nodes:

DOM Replace nodes:

DOM Create nodes: CreateElement() to create a new element node createAttribute() to create a new attribute node createTextNode() to create a new text node

DOM Add nodes: appendChild() to add a child node to an existing node.

DOM Clone nodes: The cloneNode() method creates a copy of a specified node. The cloneNode() method has a parameter (true or false). This parameter indicates if the cloned node should include all attributes and child nodes of the original node. DOM XMLHttpRequest: The XMLHttpRequest object is used to exchange data with a server behind the scenes.

by
Geetha Kalaivani Kavitha