Trước khi đi vào phần này mình có 1 đoạn ví dụ về HTML như sau. Bạn có thể copy nó và paste vào file notepad, save và đổi đuôi file thành HTML thay vì txt
<!DOCTYPE html>
<html>
<body>
<h1>DEMO</h1>
<div id="Order" name='OrderName' value='1047'>
<h3>Order</h3>
<br>
<div name="OrderDate">-------- OrderDate = 2002-03-26</div>
<br>
<div name="Customer">-------- Customer = John Costello</div>
<br>
<div name='Item'>
<div id="ProductID1" value="70" name='Product'>
<div>-------- Item 1</div>
<br>
<span>----------------- Product = Chair</span>
<br>
<span>----------------- Price = 70</span>
</div>
<div name='Quantity'>----------------- Quantity = 1</div>
</div>
<br>
<div name='Item'>
<div id="ProductID2" value="250" name='Product'>
<div>-------- Item 2</div>
<br>
<span>---------------- Product = Desk</span>
<br>
<span>---------------- Price = 250</span>
</div>
<div name='Quantity'>---------------- Quantity = 6</div>
</div>
</div>
</body>
</html>
Với ví dụ này khi bạn mở với trình duyệt Chrome, bạn sẽ page như sau:
Như vậy, bạn thấy trên trình duyệt sẽ hiển thị y nguyên tài liệu gốc. Vậy làm cách nào để chúng ta có thể đi lại trên các phần tử của tài liệu HTML để trích ra những dữ liệu mà chúng ta cần thiết.
Để đáp ứng điều này người ta thiết kế ra một ngôn ngữ XPath. XPath có một vai trò quan trọng trong việc trao đổi dữ liệu giữa các máy tính hay giữa các chương trình ứng dụng vì nó cho chúng ta tìm kiếm các dữ liệu mà ta mong muốn.
Với ví dụ trên sẽ được biểu diễn dưới dạng cây như sau:
Ví dụ 1: Chọn phần tử gốc Other
//div[@id='Order']
Ví dụ 2: Chọn phần tử Customer là con của Order
//div[@id='Order']/div[@name='Customer'] or
//div[@name='Customer']
Ví dụ 3: Chọn tất cả các phần tử Product là con của Item mà Item là con của Order
//div[@id='Order']/div[@name='Item']/div[@name='Product'] or
//div[@name='Product']
Ở ví dụ này, mình để ý sẽ thấy có 2 products là con của Order. Vì vậy, khi mình find xpath, kết quả sẽ trả về 2 matching node.
Ví dụ 4: Chọn phần tử Item đầu tiên là con của Order
(//div[@id='Order']/div[@name='Item'])[1]
Ví dụ 5: Chọn phần tử Item cuối cùng là con của Order
//div[@id='Order']/div[@name='Item'][last()]
Ví dụ 6: Chọn tất cả các phần tử mà trong đó có 2 phần tử con tên là <span>
//*[count(span)=2]
Ví dụ 7: Chọn phần tử mà tên của nó bắt đầu bằng ký tự “h“
//*[starts-with(name(),'h')]
Ví dụ 8: Chọn tất cả phần tử là con của Other
//div[@id='Order']/descendant::*
Ở ví dụ này, mình sẽ tìm thấy 23 phần tử là con của Order
Ví dụ 9: Chọn phần tử là cha của phần tử “ProductID2“
//div[@id='ProductID2']/parent::*
Ví dụ 10: Chọn tất cả các phần tử là tổ tiên của phần tử “ProductID2“
//div[@id='ProductID2']/ancestor::*
Ví dụ 11: Chọn phần tử cùng cấp đi sau (em) phần tử “ProductID1“
//div[@id='ProductID1']/following-sibling::*
Ví dụ 12: Chọn phần tử cùng cấp đi trước (anh) phần tử “Quantity“
//div[@name='Quantity']/preceding-sibling::*
Ví dụ 13: Chọn phần tử có nội dung là ‘-------- Item 1’
//div[text()='-------- Item 1']
Ví dụ 14: Chọn phần tử có nội dung contains ‘Item 1’
//div[contains(text(),'Item 1')]
Ví dụ 15: Chọn phần tử có thuộc tính name bắt đầu là ‘OrderD’
//div[starts-with(@name,'OrderD')]