Axes Methods in Xpath
Before exploring XPath axes methods, it’s recommended to have a basic understanding of XPath fundamentals. You can read the following article to gain a basic understanding of the XPath
Axes Methods
Axes Methods are used to define the relationship between the elements in DOM. It defines the type and the direction of these relationships when navigating through the document tree. Below are a few axes methods in XPath:
1. Following: Select all nodes that appear after the current node in the document order. For instance, //div[@class=”nav-fill”]/following::div would choose all div elements following the node with the class “nav-fill”. To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The examples below are unique for the Search icon
//div[@class=”nav-fill”]/following::div[2]
//div[@class=”nav-fill”]/following::div[@class=”nav-search-submit nav-sprite”]
2. Following-sibling: Select the following sibling node of the current Node in the DOM. For instance,//div[@class=”nav-fill”]/following-sibling::div would choose all div elements siblings to the node with the class “nav-fill”.To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The example below is unique for the Search icon
(//div[@class=”nav-fill”])[2]/following-sibling::div
3. Preceding: Select all nodes that appear before the current node in the document order. For instance,//div[@class=”nav-right”]//preceding::span would choose all span elements preceding the node with the class “nav-right”. To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The examples below are unique for the Search icon
(//div[@class=”nav-right”])[2]/preceding::span[1]
//div[@class=”nav-right”]/preceding::span[@id=”nav-search-submit-text”]
4. Preceding-sibling: Select the preceding sibling node of the current Node in the DOM. For instance,//div[@class=”nav-right”]//preceding-sibling::div[@class=”nav-fill”]//div//form//div//span would choose all span elements that are preceding siblings to the node with the class “nav-right”.To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The example below is unique for the Search icon
//div[@class=”nav-right”]//preceding-sibling::div[@class=”nav-fill”]//div//form//div//span[@id=”nav-search-submit-text”]
5. Descendant: Select all the descendant nodes of the current Node in the DOM. For instance,//div[@class=”nav-right”]//descendant::span would choose all span elements that are descendants to the node with the class “nav-right”. To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The examples below are unique for the Search icon
(//div[@class=”nav-right”])[1]//descendant::span
//div[@class=”nav-right”]//descendant::span[@id=”nav-search-submit- text”]
6. Child: To select the child node of the current node in the DOM, consider the example: //div[@class=”nav-search-submit nav-sprite”]//child::span. This XPath would choose all span elements that are direct children of the node with the class “nav-search-submit nav-sprite.” To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The examples below are unique for the Search icon
(//div[@class=”nav-right”])[1]//child::span
//div[@class=”nav-right”]//div//child::span[@id=”nav-search-submit-text”]
7. Ancestor: To select all the ancestor nodes of the current node in the DOM, consider the example: //input//ancestor::span. This XPath would choose all span elements that are ancestors of the node input. To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.
The example below is unique for the Search icon
//input[@id=”nav-search-submit-button”]//ancestor::span
8. Parent: To select the parent node of the current node in the DOM, consider the example: //input//parent::span. This XPath would choose all span elements that are the direct parent of the node with the input. To specify a particular element, you can use an index (e.g., [2]) or filter by a unique attribute.You can alternatively use two dots(..) instead of the parent keyword (//input[@type=”submit”]//..)
The example below is unique for the Search icon
//input[@id=”nav-search-submit-button”]//parent::span
9. Self: Useful when you want to include the current node in the selection, especially in cases where you need to perform an action on the node itself along with its descendants, consider the example: //span[@class=”nav-search-submit-text nav-sprite nav-progressive-attribute”]//self::span. It is equivalent to writing //span[@class=”nav-search-submit-text nav-sprite nav-progressive-attribute”]
I’d love to hear your thoughts! If you find the content helpful, feel free to share it with your network. Let’s continue learning together! Please follow for more informative blogs.
Learning is a journey, not a destination. Embrace the process, celebrate the progress, and let curiosity be your guide. In the world of knowledge, every step forward is a step toward empowerment.
