XPath Union (`|`) Tutorial 🎯

beginner
18 min

XPath Union (|) Tutorial 🎯

Welcome to our XPath Union (|) tutorial! In this lesson, we'll explore how to combine XPath expressions using the union operator (|), making your XML navigation more powerful and versatile.

What is XPath Union (|)? 📝

The XPath Union operator (|) allows you to combine multiple XPath expressions and select nodes that match any of the expressions. This can help you extract specific data from complex XML documents more efficiently.

Why use XPath Union (|)? 💡

Imagine you have an XML file with multiple categories of products. You might want to find all the products that are either books or electronics. With XPath Union, you can achieve this by combining two separate XPath expressions:

xml
//book | //electronic

In the example above, the //book expression selects all book elements, while the //electronic expression selects all electronic elements. The union operator (|) combines these expressions, returning all elements that match either book or electronic.

Basic XPath Union Example 🎯

Let's dive into a practical example using a simple XML file:

xml
<library> <book id="1"> <title>XML Basics</title> </book> <book id="2"> <title>XPath Fundamentals</title> </book> <electronic id="3"> <title>Python for Web Scraping</title> </electronic> <electronic id="4"> <title>Advanced Java Programming</title> </electronic> </library>

Using XPath Union, we can extract all book and electronic titles as follows:

javascript
const xmlDoc = new DOMParser().parseFromString(xml, "text/xml"); const titles = [...xmlDoc.evaluate("//book | //electronic/title", xmlDoc, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null)]; titles.forEach(title => console.log(title.textContent));

In this example, we use the evaluate() method to run our XPath expression and return an XPathResult, which we then convert to a NodeList using the spread operator (...). The resulting titles array contains all book and electronic titles.

Advanced XPath Union Examples 🎯

Selecting nodes with multiple conditions

You can combine multiple conditions using the union operator to create complex XPath expressions that select nodes based on multiple criteria. For example, to find all books with an id greater than 1, we can use:

javascript
const bookWithIdGreaterThanOne = [...xmlDoc.evaluate("//book[id > 1]", xmlDoc, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null)];

To find all electronic elements with an id less than 4, we can use:

javascript
const electronicWithIdLessThanFour = [...xmlDoc.evaluate("//electronic[id < 4]", xmlDoc, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null)];

Combining multiple XPath expressions

You can combine multiple XPath expressions using the union operator to extract specific data from a complex XML document. For example, to find all electronic titles with an id less than 4 and all book titles, we can use:

javascript
const combinedXPath = [...xmlDoc.evaluate("//book/title | //electronic[id < 4]/title", xmlDoc, null, XPathResult.ANY_UNORDERED_NODE_TYPE, null)];

In this example, the //book/title expression selects all title elements within book, while the //electronic[id < 4]/title expression selects all title elements within electronic elements that have an id less than 4. The union operator (|) combines these expressions, returning all title elements that match either criteria.

Quiz 🎯

Quick Quiz
Question 1 of 1

Which XPath expression can be used to find all books and electronic titles in the given XML?

Conclusion ✅

By now, you should have a good understanding of how to use the XPath Union operator (|) to combine XPath expressions and select nodes that match any of the expressions. This powerful feature makes navigating complex XML documents more efficient and practical, allowing you to extract specific data more easily.

Happy coding! 👋