XML DOM Traversing

Moving through XML document structure

🚶 What is DOM Traversing?

DOM traversing means moving through the XML document tree structure. You can move to parent nodes, child nodes, or sibling nodes to access different parts of your XML data. 


// Move to first child
var firstChild = node.firstChild;
// Move to parent
var parent = node.parentNode;

Understanding Node Relationships

In XML DOM, nodes have relationships like a family tree. Each node can have parents, children, and siblings. Understanding these relationships helps you navigate through your XML document efficiently and access the data you need.

👨‍👦

Parent Node

The node above current node 

node.parentNode
👶

Child Nodes

Nodes directly below current 

node.childNodes
👫

Sibling Nodes

Nodes at the same level 

node.nextSibling
🌳

Root Node

The top-level document node 

xmlDoc.documentElement

🔹 Sample XML Structure

We'll use this XML to demonstrate traversing: 

<?xml version="1.0"?>
<bookstore>
    <book category="web">
        <title>Learning HTML</title>
        <author>John Smith</author>
        <price>29.99</price>
    </book>
    <book category="programming">
        <title>JavaScript Basics</title>
        <author>Jane Doe</author>
        <price>39.99</price>
    </book>
</bookstore>

🔹 Accessing Child Nodes

Navigate to child elements using childNodes or firstChild: 

// Get the first book element
var book = xmlDoc.getElementsByTagName("book")[0];

// Access all children
var children = book.childNodes;
console.log("Number of children: " + children.length);

// Access first child
var firstChild = book.firstChild;
console.log("First child: " + firstChild.nodeName);

Output:

Number of children: 7

First child: #text

🔹 Accessing Parent Nodes

Move up to the parent element using parentNode: 

// Get a title element
var title = xmlDoc.getElementsByTagName("title")[0];

// Get its parent (book)
var parent = title.parentNode;
console.log("Parent: " + parent.nodeName);

// Get grandparent (bookstore)
var grandparent = parent.parentNode;
console.log("Grandparent: " + grandparent.nodeName);

Output:

Parent: book

Grandparent: bookstore

🔹 Accessing Sibling Nodes

Move to next or previous sibling elements: 

// Get first book
var firstBook = xmlDoc.getElementsByTagName("book")[0];

// Get next sibling (second book)
var nextBook = firstBook.nextSibling;
while (nextBook && nextBook.nodeType != 1) {
    nextBook = nextBook.nextSibling;
}

if (nextBook) {
    console.log("Next sibling: " + nextBook.nodeName);
}

Output:

Next sibling: book

🔹 Traversing All Children

Loop through all child nodes of an element: 

// Get first book
var book = xmlDoc.getElementsByTagName("book")[0];

// Loop through all children
for (var i = 0; i < book.childNodes.length; i++) {
    var node = book.childNodes[i];
    
    // Only process element nodes (nodeType 1)
    if (node.nodeType == 1) {
        var value = node.childNodes[0].nodeValue;
        console.log(node.nodeName + ": " + value);
    }
}

Output:

title: Learning HTML

author: John Smith

price: 29.99

🔹 Complete Traversing Example

Full example showing different traversing methods: 

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var xmlText = `<bookstore>
    <book>
        <title>HTML Guide</title>
        <author>John</author>
    </book>
</bookstore>`;

var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlText, "text/xml");

// Get title element
var title = xmlDoc.getElementsByTagName("title")[0];

// Traverse up
var book = title.parentNode;
var store = book.parentNode;

// Traverse down
var author = book.getElementsByTagName("author")[0];

var output = "Root: " + store.nodeName + "<br>";
output += "Parent: " + book.nodeName + "<br>";
output += "Current: " + title.nodeName + "<br>";
output += "Sibling: " + author.nodeName;

document.getElementById("demo").innerHTML = output;
</script>

</body>
</html>

Output:

Root: bookstore

Parent: book

Current: title

Sibling: author

🧠 Test Your Knowledge

Which property accesses the parent of a node?