XML Part 1

The following JavaScript fragment loads an XML document
function loadXMLDoc(dname)
{
if (window.XMLHttpRequest)
  {
  xhttp=new XMLHttpRequest();
  }
else
  {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}

The following code loads and parses an XML string:
if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
  }
function loadXMLString(txt)
{
if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(txt,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(txt);
  }
return xmlDoc;
}

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.
The JavaScript code to get the text from the first
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
    * childNodes[0] - the first child of the
    * nodeValue - the value of the node (the text itself)
Accessing Nodes
You can access a node in three ways:
1. By using the getElementsByTagName() method
2. By looping through (traversing) the nodes tree.
3. By navigating the node tree, using the node relationships.

* getElementsByTagName() returns all elements with a specified tag name.
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title");
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("title");
for (i=0;i
  {
  document.write(x[i].childNodes[0].nodeValue);
  document.write("
");
  if (x[i].nodeType==1)
  {//Process only element nodes (type 1)
  document.write(x[i].nodeName);
  document.write("
");
  }
The following code navigates the node tree using the node relationships:
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0].childNodes;
y=xmlDoc.getElementsByTagName("book")[0].firstChild;
for (i=0;i
{
if (y.nodeType==1)
  {//Process only element nodes (type 1)
  document.write(y.nodeName + "
");
  }
y=y.nextSibling;
}

* Node Properties
In the XML DOM, each node is an object.
Objects have methods and properties, that can be accessed and manipulated by JavaScript.
Three important node properties are:    * nodeName
    * nodeValue
    * nodeType
The nodeName property specifies the name of a node.
    * 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 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

The following code retrieves the text node value of the first
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
txt=x.nodeValue;
x.nodeValue="Easy Cooking";

The nodeType property specifies the type of node.
NodeType is read only.
The most important node types are:
Node type     NodeType
Element              1
Attribute            2
Text                   3
Comment          8
Document        9

xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('title').length;
xmlDoc=loadXMLDoc("books.xml");
//the x variable will hold a node list
x=xmlDoc.getElementsByTagName('title');
for (i=0;i
{
document.write(x[i].childNodes[0].nodeValue);
document.write("
");
}
The attributes property of an element node returns a list of attribute nodes.
This is called a named node map, and is similar to a node list, except for some differences in methods and properties.
A attribute list keeps itself up-to-date. If an attribute is deleted or added, the list is automatically updated.
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book')[0].attributes;
document.write(x.getNamedItem("category").nodeValue);
document.write("
" + x.length);

The example below loops through all child nodes of , and displays their names and values:
All modern browsers support the W3C DOM specification.
However, there are some differences between browsers. One important difference is:
    * The way they handle white-spaces and new lines
Internet Explorer will NOT treat empty white-spaces, or new lines as text nodes, wile other browsers will.
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.documentElement.childNodes;
document.write("Number of child nodes: " + x.length);

DOM - Parent NodeAll nodes has exactly one parent node. The following code navigates to the parent node of :    
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("book")[0];
document.write(x.parentNode.nodeName);

Firefox, and some other browsers, will treat empty white-spaces or new lines as text nodes, Internet Explorer will not.
This causes a problem when using the properties: firstChild, lastChild, nextSibling, previousSibling.
To avoid navigating to empty text nodes (spaces and new-line characters between element nodes), we use a function that checks the node type:
  
  function get_nextSibling(n)
{
y=n.nextSibling;
while (y.nodeType!=1)
  {
  y=y.nextSibling;
  }
return y;
}
The nodeValue property is used to get the text value of a node.
The getAttribute() method returns the value of an attribute.

Get the Value of an Element
In the DOM, everything is a node. Element nodes does not have a text value.
The text of an element node is stored in a child node. This node is called a text node.
The way to get the text of an element, is to get the value of the child node (text node).
Get an Element Value
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];
The childNodes property returns a list of child nodes. The
The following code retrieves the text node of the
x=xmlDoc.getElementsByTagName("title")[0];
y=x.childNodes[0];
The nodeValue property returns the text value of the text node:
x=xmlDoc.getElementsByTagName("title")[0];
y=x.childNodes[0];
txt=y.nodeValue;

Get the Value of an Attribute
In the DOM, attributes are nodes. Unlike element nodes, attribute nodes have text values.
The way to get the value of an attribute, is to get its text value.
This can be done using the getAttribute() method or using the nodeValue property of the attribute node.
Get an Attribute Value - getAttribute()
The getAttribute() method returns an attribute value.
The following code retrieves the text value of the "lang" attribute of the first
xmlDoc=loadXMLDoc("books.xml");
txt=xmlDoc.getElementsByTagName("title")[0].getAttribute("lang");
Get an Attribute Value - getAttributeNode()
The getAttributeNode() method returns an attribute node.
The following code retrieves the text value of the "lang" attribute of the first
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].getAttributeNode("lang");
txt=x.nodeValue;

Change the Value of an Element
In the DOM, everything is a node. Element nodes do not have a text value.
The text of an element node is stored in a child node. This node is called a text node.
The way to change the text of an element, is to change the value of the child node (text node).
Change the Value of a Text Node
The nodeValue property can be used to change the value of a text node.
The following code changes the text node value of the first
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName("title")[0].childNodes[0];
x.nodeValue="Easy Cooking";
Change the Value of an Attribute
In the DOM, attributes are nodes. Unlike element nodes, attribute nodes have text values.
The way to change the value of an attribute, is to change its text value.
This can be done using the setAttribute() method or using the nodeValue property of the attribute node.
Change an Attribute Using setAttribute()
The setAttribute() method changes the value of an existing attribute, or creates a new attribute.
The following code changes the category attribute of the element:
xmlDoc=loadXMLDoc("books.xml");
x=xmlDoc.getElementsByTagName('book');
x[0].setAttribute("category","food");

Change an Attribute Using nodeValue
The nodeValue property can be used to change the value of a attribute node:
xmlDoc=loadXMLDoc("books.xml");

x=xmlDoc.getElementsByTagName("book")[0]
y=x.getAttributeNode("category");
y.nodeValue="food";