XML DOM Navigating

Finding and accessing specific XML elements

🧭 What is DOM Navigating?

DOM navigating means finding and accessing specific elements in your XML document. You can search by tag name, navigate through the document structure, or use properties to locate exact elements you need. 


// Find elements by tag name
var books = xmlDoc.getElementsByTagName("book");
var firstBook = books[0];

Navigation Methods

XML DOM provides several methods to navigate and find elements. These methods help you quickly locate specific data without manually traversing the entire document tree. Choose the right method based on what you're searching for.

🏷️

By Tag Name

Find elements by their tag 

getElementsByTagName()
🎯

Document Element

Access the root element 

documentElement
📍

Node Name

Get the name of a node 

nodeName
🔍

Node Type

Identify the type of node 

nodeType

🔹 Sample XML Data

We'll use this XML for navigation examples: 

<?xml version="1.0"?>
<catalog>
    <product id="101">
        <name>Laptop</name>
        <price>999</price>
        <stock>15</stock>
    </product>
    <product id="102">
        <name>Mouse</name>
        <price>25</price>
        <stock>50</stock>
    </product>
</catalog>

🔹 Navigate by Tag Name

Find all elements with a specific tag name: 

// Get all product elements
var products = xmlDoc.getElementsByTagName("product");
console.log("Total products: " + products.length);

// Get all name elements
var names = xmlDoc.getElementsByTagName("name");
console.log("First product: " + names[0].childNodes[0].nodeValue);

Output:

Total products: 2

First product: Laptop

🔹 Access Root Element

Get the document's root element using documentElement: 

// Get the root element
var root = xmlDoc.documentElement;
console.log("Root element: " + root.nodeName);

// Get root's children
var children = root.childNodes;
console.log("Root has " + children.length + " children");

Output:

Root element: catalog

Root has 5 children

🔹 Check Node Names

Use nodeName to identify elements: 

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

// Check node name
console.log("Element name: " + product.nodeName);

// Loop through children and show names
for (var i = 0; i < product.childNodes.length; i++) {
    var node = product.childNodes[i];
    if (node.nodeType == 1) {
        console.log("Child: " + node.nodeName);
    }
}

Output:

Element name: product

Child: name

Child: price

Child: stock

🔹 Navigate to Specific Elements

Combine methods to find specific data: 

// Get second product
var products = xmlDoc.getElementsByTagName("product");
var secondProduct = products[1];

// Get its name
var name = secondProduct.getElementsByTagName("name")[0];
var productName = name.childNodes[0].nodeValue;

// Get its price
var price = secondProduct.getElementsByTagName("price")[0];
var productPrice = price.childNodes[0].nodeValue;

console.log(productName + " costs $" + productPrice);

Output:

Mouse costs $25

🔹 Node Type Reference

Different node types in XML DOM:

  • 1: Element node (e.g., <book>)
  • 2: Attribute node (e.g., id="123")
  • 3: Text node (text content)
  • 8: Comment node (<!-- comment -->)
  • 9: Document node (root)

🔹 Complete Navigation Example

Full example showing various navigation techniques: 

<!DOCTYPE html>
<html>
<body>

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

<script>
var xmlText = `<catalog>
    <product>
        <name>Laptop</name>
        <price>999</price>
    </product>
    <product>
        <name>Mouse</name>
        <price>25</price>
    </product>
</catalog>`;

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

// Navigate to root
var root = xmlDoc.documentElement;

// Get all products
var products = root.getElementsByTagName("product");

var output = "Catalog contains:<br>";
for (var i = 0; i < products.length; i++) {
    var name = products[i].getElementsByTagName("name")[0];
    var price = products[i].getElementsByTagName("price")[0];
    
    output += name.childNodes[0].nodeValue + " - $";
    output += price.childNodes[0].nodeValue + "<br>";
}

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

</body>
</html>

Output:

Catalog contains:

Laptop - $999

Mouse - $25

🧠 Test Your Knowledge

Which method finds elements by their tag name?