Introduction to XML Document Object Model - Working With XML Data

(Page 4 of 5 )

Working With XML Data

So, we are going to write a sample code quickly to see how the DOM traverses through the XML document, using the TravelXML.html. We are going to use Internet Explorer here, with XML Data Island, the data island is simply a HTML tag that acts like data control.


<xml ID= “diData” SRC = “BookAuthors.xml”></xml>



Above we have a data island named diData, containing data from the XML file BookAuthors.xml. Please note, data islands are like containers for data, they don’t actually show up on the screen. So we need to find a way to access the data from this and display it.


<SPAN ID = “txtData”></SPAN>



Our aim is to use DOM object to extract the XML info from the data island, and display the data in SPAN. We will start our work with the root node, and find any child nodes to that root node and display the details of the node. So we will display the name, type and value of the node, we will repeat the process for the child node because a child node can contain nodes of its own. We write a recursive function to use for this is a tree traversal code.

One major piece of information we are going to display is the node’s type. We will convert it into string in this case to make it readable. In order to do this we have to declare a global variable containing the text description of the node type and indexed by the actual node type number. The very beginning of the document will have the following code, well before the JScript code.


var ga_strNodeType = new Array 
(  ‘ ’, ‘ELEMENT(1),
‘ATTRIBUTE (2)’,
‘TEXT (3)’,
‘CDATA SECTION (4),
‘ENTITY REFERENCE (5),
‘ENTITY (6)’
‘DOCUMENT (9);
‘DOCUMENT TYPE (10),
DOCUMENT FRAGMENT (11),
‘NOTATION (12)’
);



The recursive function that we will be calling is called displaychildNodes.  This function will pair into parameters it accepts an XML node and an integer that indicates the current level of the node in the hierarchy.


function displayChildNodes (baNode, intLevel)
{
var strNodes = ‘’;
//a string variable containing the node 
//information.  
var intCount = 0;
//an integer variable containing 
//the count of nodes
var intNode = 0;
//a integer variable containing current 
//number of node.       
var baAttrList = ‘’;
//A node list of the attributes for 
//a particular node.
//Building the string beginning from the 
//current node name, its type and value. 
//An integer is used to identify the type, 
//and the previously define array 
//ga_strNodeTypes is used to get the 
//description of node type. The getIndent 
//function returns a blank string containing 
//spaces up to the level in a tree.
//To get value for this node
strNodes  + = getIndent(intLevel) + ‘<b>’ +  baNode.nodeName   + ‘</b>   Value: <b>’ + baNode.nodeValue + ‘</b><br>’;
//Use a loop to find out if the node has 
//any attributes, if so loop them, adding 
//their details to the string.
strNodes  + = getIndent(intLevel) 
+ ‘<b>’ +  baNode.nodeName   
+ ‘</b>   Value: <b>’ 
+ baNode.nodeValue + ‘</b><br>’; 
//Use a loop to find out if the node 
//has any attributes, if so loop them,
//adding their details to the string.
baAttrList = baNode.attributes;
 If (baAttrList != null)
 {
  intCount = baAttrList.length;
  if (intCount > 0)
 {
//for each attribute display the 
//attribute information.
for(intAttr =0; intAttr < intCount; intAttr++)
 strNodes  + = getIndent ( intLevel + 1 ) + ‘<b>’ +  baAttrList(intAttr).nodeName  + ‘</b>   Type: <b>’ + ga_strNodeTypes[baAttrList(intAttr).nodeType] + ‘</b>   Value: <b>’ + baAttrList(intAttr).nodeValue + ‘</b><br>’;
 }
}
//Finally we check for any child node, 
//and for each child node call the same function.
intCount = nodAttrList.length;
if (intCount > 0)
{
 //for each child node display the child node 
 //information.
 for(intNode =0; intNode < intCount; intNode++)
 strNodes  + = showChildNodes(baNode.childNodes(intNode), intLevel +1);
 return strNodes;
}



To display the output from the above code using DOM, you could use the following:


DomXMLData = diData
TxtData.innerHTML = showChildNodes(domXMLData, 0);



Thrilling Results With DOM

The above code calls the function, passing in the top-level node. Loading the TravelXML.html in the Internet Explorer (IE) you can see the output and it will look something like below:

Next: Traversing the Nodes in an XML Document >>
 

More XML Articles
More By Gayathri Gokul

Comments On: Introduction to XML Document Object Model

>>> Be the FIRST to comment on this article!