XPath Introduction

Navigate and query XML documents efficiently

🗺️ What is XPath?

XPath (XML Path Language) is a powerful query language for selecting nodes from XML documents. It uses path expressions to navigate through elements and attributes, making it easy to find specific data quickly. 


// Select all book titles using XPath
var titles = xmlDoc.evaluate("//book/title", xmlDoc, 
    null, XPathResult.ANY_TYPE, null);

Why Use XPath?

XPath provides a simple and efficient way to locate elements in XML documents. Instead of manually traversing the DOM tree, you can use path expressions to directly access the data you need.

🎯

Precise Selection

Target exact elements you need 

//book[@id='B001']
⚡

Fast Queries

Quickly find data in large XML 

//title
🔍

Flexible Searching

Use conditions and filters 

//book[price<30]
📊

Standard Language

Works across platforms 

/catalog/book

🔹 Basic XPath Syntax

XPath uses path expressions similar to file system paths: 

// Sample XML
var xmlString = `<library>
    <book>
        <title>JavaScript Guide</title>
        <author>John Doe</author>
    </book>
</library>`;

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

// XPath: Select all titles
var result = xmlDoc.evaluate(
    "//title",           // XPath expression
    xmlDoc,              // Context node
    null,                // Namespace resolver
    XPathResult.ANY_TYPE,
    null
);

var title = result.iterateNext();
console.log(title.textContent);  // Output: JavaScript Guide

Output:

JavaScript Guide

🔹 Common XPath Expressions

Here are the most frequently used XPath patterns:

Basic Paths:

  • /library - Select root library element
  • /library/book - Select all book children of library
  • //book - Select all book elements anywhere
  • //book/title - Select all title elements inside book

With Attributes:

  • //book[@id] - Books with id attribute
  • //book[@id='B001'] - Book with specific id
  • //@id - All id attributes

🔹 XPath in JavaScript

Use the evaluate() method to execute XPath queries: 

// Sample XML with multiple books
var xmlString = `<library>
    <book id="B001"><title>Book One</title><price>25</price></book>
    <book id="B002"><title>Book Two</title><price>35</price></book>
    <book id="B003"><title>Book Three</title><price>20</price></book>
</library>`;

var xmlDoc = parser.parseFromString(xmlString, "text/xml");

// Find all book titles
var result = xmlDoc.evaluate(
    "//book/title",
    xmlDoc,
    null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null
);

console.log("Found " + result.snapshotLength + " titles:");
for (var i = 0; i < result.snapshotLength; i++) {
    console.log("- " + result.snapshotItem(i).textContent);
}

Output: 

Found 3 titles:
- Book One
- Book Two
- Book Three

🔹 XPath with Conditions

Filter results using predicates (conditions in square brackets): 

// Find books with price less than 30
var result = xmlDoc.evaluate(
    "//book[price<30]/title",
    xmlDoc,
    null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null
);

console.log("Affordable books:");
for (var i = 0; i < result.snapshotLength; i++) {
    console.log("- " + result.snapshotItem(i).textContent);
}

Output: 

Affordable books:
- Book One
- Book Three

🔹 XPath Result Types

Different result types for different needs:

Common Result Types:

  • ANY_TYPE - Returns most appropriate type
  • ORDERED_NODE_SNAPSHOT_TYPE - Array-like list of nodes
  • FIRST_ORDERED_NODE_TYPE - Returns first matching node
  • STRING_TYPE - Returns string value
  • NUMBER_TYPE - Returns numeric value 
// Get first book title as string
var result = xmlDoc.evaluate(
    "//book[1]/title/text()",
    xmlDoc,
    null,
    XPathResult.STRING_TYPE,
    null
);

console.log("First book: " + result.stringValue);

Output:

First book: Book One

🧠 Test Your Knowledge

What does the XPath expression "//book" select?