使用Xpath軸方式可依據在文檔數中的元素的相對位置來進行定位,先找到一個相對好定位的元素,在根據與它相對位置來定位其他元素,可以解決一些元素難以定位的問題。今天學習了,寫下筆記加深下印象
如家HTML頁面:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在此處插入標題</title> </head> <body> <div id="div1"> <input alt="div1-input1" id="iv1-input1" value="" /> <a href="http://www.baidu.com">test</a> <img alt="div1-img1" src=""> <input type="button" id="div1-button1" name="div1-button" /> </div> <div id="div2"> <input alt="div2-input2" id="div2-input2" value="" /> <a href="http://www.sogou.com">test</a> <img alt="div2-img2" src=""> </div> </body> </html>
畫出樹狀圖如下所示:
Xpath軸關鍵字 | 軸的定義說明 | 定位表達式實例 | 表達式解釋 |
parent | 選取當前節點的父節點 | //img[@alt='div2-img2']/parent::div | 查找到alt屬性為div2-img2的img元素,並基於圖片找到其上一級的div元素 |
child | 選取當前節點的子節點 | //div[@id='div1']/child::img | 查找id為div1的div標簽,基於當前div查找標簽為img的子節點 |
ancestor | 選取當前節點的所有上層節點 | //img[@alt='div2-img2']/ancestor::div | 查找alt屬性為div2-img2的圖片,基於當前圖片找到其上級的div頁面元素 |
descendant | 選取當前節點所有下層節點 | //div[@id='div2']/descendant::img | 查找id屬性為div2的div元素,在查找其下級所有節點中的img元素 |
following | 選取當前節點之后顯示的所有節點 | //div[@id='div1']/following::img | 查找到ID屬性為div1的div元素,並基於div的位置找到它后面節點中的img元素 |
following-sibling | 選取當前節點所有的平級節點 | //img[@alt='div1-img1']/following-sibling::input | 查找到alt屬性為div1-img1的img頁面元素,並基於img的位置找到后續節點中的input元素 |
preceding | 選取當前節點前面所有的節點 | //img[@alt='div2-img2']/preceding::div | 查找到alt屬性為div2-img2的圖片頁面元素,並基於圖片的位置找到它前面節點中的div元素 |
preceding-sibling | 選取當前節點前面所有平級的節點 | //img[@alt='div2-img2']/preceding-sibling::a[1] | 查找到alt屬性值為div2-img2的圖片元素,基於圖片位置找到它前面同級節點的第二個鏈接頁面元素 |
下面是例子: