We now have a youtube channel. Subscribe!
Home
DOM

XML DOM | Navigation

XML DOM - Navigation


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 previous tutorials on XML DOM, we have studied about DOM structure, how to load and parse XML DOM object and lastly how to traverse through the DOM objects. In this tutorial, we are going to be looking at how we can navigate between nodes in a DOM object.

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


The following below is a diagram of a node tree which shows its relationship with other nodes in the tree -

node tree

Parent Node

This property is used to specify the parent node as a node object.

Example

The following example is used to parse an XML document (node.xml) into XML DOM object, and the DOM object is navigated to the parent node through the child node -

<!DOCTYPE html>
<html>
   <body>
      <script>
         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);
      </script>
   </body>
</html>

From the above illustration, the child node Employee navigates to its parent node.

Output

Now save this file as navigate_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the parent node of Employee, i.e, Company.


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 that is present in the DOM object -

<!DOCTYPE html>
<html>
   <body>
      <script>
         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);
      </script>
   </body>
</html>

  • 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 web server's path (this file and node.xml should be on the same path in your server). The output of the above code gives us the first child node of Employee, i.e, FirstName.


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 that is present in the DOM object - 

<!DOCTYPE html>
  <body>
      <script>
         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);
      </script>
   </body>
</html>

Output

Save this file as last_node_example.html on the web server's path (this file and node.xml should be on the same path in your server). The output of the above example gives us the last child node of Employee, i.e, Email.

Next Sibling

Next sibling 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, and then immediately navigates to the next node that is present in the XML document -

<!DOCTYPE html>
   <body>
      <script>
         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);
      </script>
   </body>
</html>

Output

Save the file as nextSibling_example.html on the web server's path (this file and node.xml should be on the same path in your server). The output of the above example will give us the next sibling node of FirstName, i.e, LastName.


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 -

<!DOCTYPE html>
   <body>
      <script>
         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);
      </script>
   </body>
</html>

Output

Save file as previousSibling_example.html on the server's path (this file and node.xml should be on the same path in your server). The output of the above example will give us the previous sibling node of Email, i.e, ContactNo.


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2023 ‧ WebDesignTutorialz. All rights reserved. Developed by Jago Desain