Navigating XML DOM with javascript Contd.

childNodes


Now that you have the root element you can take advantage of the other properties for DOM navigation.
The Node.childNodes property returns an array of nodes that are children of the node it is being called upon.
Lets look at the xml document again:


<customerlist>
     <customer>
         <name>John Doe</name>
         <address>1 Main Street</address>
         <tel>123-456-7890</tel>
     </customer>
     <customer>
         <name>Jane Doe</name>
         <address>3 Main Street</address>
         <tel>987-654-3210</tel>
     </customer>
</customerlist>

The following code will get an array containing the two customer nodes, which are children of the root <customerlist> node:

root = xmlDoc.getElementsByTagName("customerlist")[0];
customers = root.childNodes;


The first element in the array, customers[0] will be the node with John Doe, customers[1] will be the node with Jane Doe.

firstChild, lastChild


Now we have a customer node we can test two other DOM properties on it. The node.firstChild and node.lastChild properties return the first and last child nodes of the node it is referencing. Using the customers array we can get the "name" and "tel" node for John Doe.


root = xmlDoc.getElementsByTagName("customerlist")[0];
customers = root.childNodes;
customer1namenode = customers[0].firstChild;
customer1telnode = customers[0].lastChild; 


Now you have accessed data containing nodes and can read the data in them. This is done using the node.nodeValue property. However, the data within the node cannot be accessed directly as the DOM wraps all text data into a text node:

alert(customer1namenode.nodeValue); // is not incorrect


alert(customer1namenode.firstChild.nodeValue); 


previousSibling, nextSibling


Up to this point we have not managed to access the address node for the customer. We could use getElementsByTagName but as mentioned before its not heirarchy safe and we would get an array of <address> nodes with no knowledge of which belonging to what. The node.previousSibling and node.nextSibling properties give a way to step through the child nodes given we have one of the parentnode. We could get the address node by 


addressnode = customer1namenode.nextSibling;
or
addressnode =  customer1telnode .previousSibling; 


Similarly we could have access the address from the childnodes array

customers[0].childNodes[1];
/*
where childnodes[0] is the name 
      childnodes[1] is the address 

      childnodes[2] is the tel
*/



parentNode


The node.parentNode property returns the node that is above the current node it is called upon in the heirarchy.


root = xmlDoc.getElementsByTagName("customerlist")[0];
customers = root.childNodes;
alert(customers[0].parentNode.nodeName);



The above will show "customerlist" in the alert dialog since it is the element directly above the <customer> element in the heirarchy.


Javascript XML processing
Navigating XML DOM with Javascript
Navigating XML DOM with javascript Contd.
Navigating XML DOM with javascript Code