In HTML, there are three different types of nodes:
- Document Node
- Element Node
- Attribute Node
Lets extract different types of Nodes from the below sample HTML code:
HTML Code:
<html>
<body bgcolor="blue">
<h1> Heading One </h1>
< b> Bold Text </b>
<p id="para1"> Paragraph One Text </p>
<p id="para2"> Paragraph Two Text </p>
<p id="para2"> Paragraph Two Text </p>
</body>
</html>
Nodes from the above HTML Code:
1. <html> tag comes under the Document Node as it is the Root for all the other HTML tags
2. <h1>, <b>. and <p> tags comes under Element Nodes as they are intended for elements
3. bgcolor="blue", id="para1" and id="para2" are the attribute nodes as bgcolor="blue" attribute is inside the <body> tag, id="para1' is inside the <p> tab and id="para2" attribute is inside another <p> tag.
So the general formats for Relative XPath Path is
//ElementNode[@AttributeNode]
Lets Identify the nodes that are repeating:
1. View the above HTML code
2. Observe that only the <p> tag is written twice. Hence <p> tag is the repeating node.
Suppose if we try to locate the element using //p XPath path from the above HTML code, the two paragraph tags will be located. But if we want to locate the exact <p> tag element, we've to do any of the following things:
- Add index values to the XPath path. i.e. //p[1] or //p[2] . //p[1] will locate the first <p> tag element where as //p[2] will locate the second <p> tag element.
- Add XPath functions as predicates in the XPath path i.e. //p[last( )] will locate the last <p> tag element in the above html code and many more.
- Add Attribute Nodes to the XPath path. i.e. //p[@id='para1'] will locate the <p> tag element having id='para1' attribute in the HTML Source and //p[@id='para2'] will locate the <p> tag element having id='para2' attribute in the HTML Source.
- And many more ways.
Now you have understood how the XPath can parse the HTML Source code. To get more knowledge on writing the XPath in a better way, go through the upcoming posts on XPath.
Please comment below to feedback or ask questions.
Locate the Element Nodes using Relative XPath will be explained in the next post.
