Introduction to “XPath”

XPATH

Yash Khadse

13 October 2018

XPath is a query language for selecting the nodes from the XML or HTML document. It is used for scraping the web content from the XML or HTML document using a different type of selectors to get the actual content that we want to get from the document. Xpath was defined by the Wide Web Consortium. There is also CSS selectors but these selectors are not used while getting the complicated path. CSS selectors work with attributes like ID and Class, while Xpath selectors will traverse the whole DOM with the top down approach and also work with nested elements, so xpath is preferred for scraping the web content. So with the help of XPath, you can extract the data based on text elements contents.

Types of Xpath:

Based on the location of node in the HTML document. Xpath is classified into two types:

  • ABSOLUTE XPATH If the location of xpath starts with root node or with ‘/'(single slash) then it is an absolute path.
  • RELATIVE XPATH If the location of xpath starts with the node that we have selected or with //(double slash) then it is a relative path.

Consider the following example:

Example

Types of nodes in an XPath tree:

XPath handles the XML or HTML document as a tree. The following figure shows how the Xpath tree for the HTML document looks like: XPATH-Flow

Below are the different types of nodes in an XPath tree:

  • Element node: represents the HTML element, i.e an HTML tag.
  • Attribute node: it represents an attribute in an element node, e.g. “href” attribute in <a href=”http://www.example.com”>example</a>
  • Comment node: represents comments in the HTML document which is denoted by (<!– … –>)
  • Text node: represents the text enclosed in an element node (example in <p>example</p>)

Now, suppose that if we want the title of the html page by using the xpath expression it should be: /html/head/title Instead of giving the full node path from root of the tree, we can also select them by using: //title, which means it will look into the whole tree, starting from the root of the tree (//) and select only those nodes whose name matches with title.

Some examples of name tests:

ExpressionMeaning
/htmlSelects node named html, which is under the root of the html document.
/html/headSelects the node named head, which is inside the html node.
//titleSelects all the title nodes from the HTML document.
//h2/aSelects all the nodes which are directly under an h2 node.

Some examples of node type tests:

ExpressionMeaning
//comment()Selects only comment nodes.
//node()Selects any kind of node in the tree.
//text()Selects only the text nodes, for eg. “This is the first paragraph”.
//*Selects all nodes, except comment and text nodes.

We can also combine name and node tests in a single expression. Let us consider an example: //p/text() This expression selects the text nodes inside of p elements. So from the above example, it will select “This is the first paragraph.” Consider this HTML document: Example2 Suppose we want to select only the first li node from the above example. Then the expression is: //li[position() = 1]. This expression which is enclosed by square brackets is called as predicate and it filters the node set returned by //li. It will checks each node’s position using the position() function, which returns the position of the current node. We can abbreviate the expression above to: //li[1] Both XPath expressions above would select the following element: <li class=”quote”>Quote 1</li>

Some examples of predicate:

ExpressionMeaning
//li[position()%2=0]Selects the li elements at even positions.
//li[a]Selects the li elements which is enclose in an a element.
//li[a or h2]Selects li elements from HTML document which enclose either an a or an h2 element.
//li[ a [ text() = “link” ] ]Selects the li elements which enclose an a element and whose text is “link”. Can also be written as //li[ a/text()=”link” ].
//li[last()]Selects the last li element in the document.

We can also combine multiple XPath expressions in a single XPath using the union operator |. It will combine two different xpath into single XPath. For an example, we can select all the a and h2 elements in the document above : //a | //h2 Now, consider this HTML document: Example3 Suppose we want to select only the a elements whose link points to an HTTPS URL. We can do it by checking their href attribute: //a[starts-with(@href, “https”)] This expression will selects all the a elements from HTML document and for each of those elements, it will checks whether their href attribute starts with “https”. We can access any node attribute using the @attributename syntax.

Some examples which uses attribute element:

ExpressionMeaning
//a[@href=”https://scrapy.org”]Selects the a elements pointing to https://scrapy.org.
//a/@hrefSelects value of the href attribute from all the a elements in the html document.
//li[@id]Selects only li elements from html document which have id attribute.

If we want to get the element with the help of its text then we can get it by: //*[contains(text(),”This”)] , it will select matches the text “This” in the html document.

It will select Example4

Suppose if we want to get all the elements between two different specific text in the document. Consider the following example: Example5 Then the xpath of to get the elements is as follows: //*[contains(text(),”Ingredients”)]/../following::div[./following::*[contains(text(),”Directions”)]]

XPath Axes

An axis represents the relationship between the context node and the nodes relative to the context node in the tree. There are thirteen different types of axes in the XPath axes.

AxisNameMeaning
ancestorSelects all the ancestors (i.e parent, grandparent, etc.) of the current node
ancestor-or-selfSelects all the ancestors (i.e parent, grandparent, etc.) of the current node and the current node itself
childSelect all child of the current node.
descendentSelects all the descendents (i.e children, grandchildren,etc.)
descendant-or-selfSelects all the descendants (i.e children, grandchildren, etc.) of the current node and the current node itself
followingSelects everything in the document after the closing tag of the current node
following-siblingSelects all the siblings after the current node
namespaceSelects all the namespace nodes of the current node
parentSelects the parent of the current node
precedingSelects all the nodes that appear before the current node in the document, except ancestors, attribute nodes and namespace nodes
preceding-siblingSelects all the siblings before the current node.
selfSelects the current node. It can be abbreviated as a single period (.)

Wrap up

Xpath is a very powerful and vast topic, this is just an introduction to the basic concepts. If you want to learn more about it, please refer below links:

One can use online XPath tester (https://extendsclass.com/xpath-tester.html) as well.

Request a quote