Hello folks! welcome back to a new edition our tutorial on Xml Dom. In this edition of our XML DOM tutorial, we are going to be discussing about XML DOM - Navigation.
In our past tutorials on XML DOM, we have learnt about DOM structure, how to load and parse XML DOM object and traverse through the DOM objects. In this tutorial post, we are going to be looking at how we can navigate between nodes in a DOM object.
The XML DOM consist of various properties of the nodes which makes it possible for us to navigate through the nodes, such as -
In our past tutorials on XML DOM, we have learnt about DOM structure, how to load and parse XML DOM object and traverse through the DOM objects. In this tutorial post, we are going to be looking at how we can navigate between nodes in a DOM object.
The XML DOM consist of various properties of the nodes which makes it possible for us to navigate through the nodes, such as -
- parentNode
- childNodes
- firstChild
- lastChild
- nextSibling
- previousSibling
READ: XML DOM | Traversing
The following below is a diagram of a node tree which shows its relationship with other nodes in the tree -
Parent Node
This property is used to specify the parent node as a node object.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object. And then the DOM object is navigated to the parent node through the child node -
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var y = xmlDoc.getElementsByTagName("Employee")[0];
document.write(y.parentNode.nodeName);
From the above illustration, the child node Employee navigates to its parent node.
Output
Save this file as navigate_example.html on the server path (this file and node.xml should be on same path in your server). The output of the above example gives us the parent node of Employee, i.e, Company.
READ: XML DOM | Loading
First Child
This property is of type Node and represent the first child name present in the NodeList.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, then navigates to the first child node present in the DOM object -
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_firstChild(p) {
a = p.firstChild;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var firstchild = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(firstchild.nodeName);
- The get_firstChild(p) function is used to avoid the empty nodes. It helps to get the firstChild element from the node list.
- x = get_firstChild(xmlDoc.getElementsByTagName("Employee")[0]) fetches the first child node for the tag name Employee.
Output
Save this file as first_node_example.html on the server path (this file and node.xml should be on same path in your server). The output of the above example gives us the first child node of Employee, i.e, FirstName.
READ: XML DOM | Methods
Last Child
This property is of type Node and represent the last child name present in the NodeList.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, then navigates to the last child node present in the DOM object -
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_lastChild(p) {
a = p.lastChild;
while (a.nodeType != 1){
a = a.previousSibling;
}
return a;
}
var lastchild = get_lastChild(xmlDoc.getElementsByTagName("Employee")[0]);
document.write(lastchild.nodeName);
Output
Save this file as last_node_example.html on the server path (this file and node.xml should be on same path in your server). The output of the above example gives us the last child node of Employee, i.e, Email.
Next Sibling
This property is of type Node and represent the next child, i.e, the next sibling of the specified child element present in the NodeList.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, then immediately navigates to the next node present in the XML document -
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_nextSibling(p) {
a = p.nextSibling;
while (a.nodeType != 1) {
a = a.nextSibling;
}
return a;
}
var nextsibling = get_nextSibling(xmlDoc.getElementsByTagName("FirstName")[0]);
document.write(nextsibling.nodeName);
Output
Save this file as nextSibling_example.html on the server path (this file and node.xml should be on same path in your server). The output of the above example gives us the next sibling node of FirstName, i.e, LastName.
READ: XML DOM | Nodes
Previous Sibling
This property is of type Node and represent the previous child, i.e, the previous sibling of the specified child element present in the NodeList.
Example
The below example is used to parse an xml document (node.xml) into XML DOM object, then navigates to the previous node of the last child node present in the NodeList -
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/dom/node.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
function get_previousSibling(p) {
a = p.previousSibling;
while (a.nodeType != 1) {
a = a.previousSibling;
}
return a;
}
prevsibling = get_previousSibling(xmlDoc.getElementsByTagName("Email")[0]);
document.write(prevsibling.nodeName);
Output
Save this file as previousSibling_example.html on the server path (this file and node.xml should be on same path in your server). The output of the above example gives us the previous sibling node of Email, i.e, ContactNo.
READ: XML DOM | Node Tree
Alright guys! This is where we are going to be rounding up for this tutorial post. In our next tutorial, we are going to be discussing about XML DOM Accessing.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
