使用Xpath獲取頁面元素
【參見W3C官網說明】
以下Xpath路徑都是獲取下面地址的元素
可以在console 使用 $x（） 執行xpath進行驗證
下面列出了最有用的路徑表達式：
| 表達式 | 描述 |
|---|---|
| nodename | 選取此節點的所有子節點。 |
| / | 從根節點選取。 |
| // | 從匹配選擇的當前節點選擇文檔中的節點，而不考慮它們的位置。 |
| . | 選取當前節點。 |
| .. | 選取當前節點的父節點。 |
| @ | 選取屬性。 |
| * | 匹配任何元素節點。 |
| @* | 匹配任何屬性節點。 |
| node() | 匹配任何類型的節點。 |
| | | 通過在路徑表達式中使用“|”運算符，您可以選取若干個路徑。 |
結合關鍵字、索引的運用實例
| 路徑表達式 | 結果 |
|---|---|
| bookstore | 選取 bookstore 元素的所有子節點。 |
| /bookstore | 選取根元素 bookstore。 |
| bookstore/book | 選取屬於 bookstore 的子元素的所有 book 元素。 |
| //book | 選取所有 book 子元素，而不管它們在文檔中的位置。 |
| bookstore//book | 選擇屬於 bookstore 元素的后代的所有 book 元素，而不管它們位於 bookstore 之下的什么位置。 |
| //@lang | 選取名為 lang 的所有屬性。 |
| //div/form/input[2] | 匹配 上級節點 div 下節點是 form 中的第二個 input 元素 |
| //div//div[@id='ls']/span[position()=3] | position() 索引函數 |
| //div//div[@id='ls']/span[position()<3] | position() 索引函數 |
| //div//div[@id='ls']/span[last()] | last() 索引 表示同級的最后一個元素 |
| //div//div[@id='ls']/span[last()-1] | last() 索引 表示同級的倒數第二個元素 |
| //div//input[@type='radio' and @value='sx'] | and 匹配的input元素要兩個條件同時滿足 |
| //div//input[@name='password' or @name="username"] | or 或者的關系，匹配的input元素兩個條件滿足一個即可 |
| //div//input[not(@id='username')] | not 除了當前條件 匹配div中id不等於username的所有input元素 |
| //a[contains(@class,'btn-primary')] | contains 匹配 a標簽的class屬性中包含btn-primary元素 |
| //div//input[starts-with(@id,'user')] | starts-with 匹配當前id屬性是以'user'開頭的所有input元素 |
| //div[substring(@id,1,11)='_mail_input'] | substring 匹配div中id的第1-11個字符內容為 _mail_input 的元素 |
| //div[substring-before(@id,'-')='_mail_input_'] | substring-before 匹配div中id內容在 '-' 之前等於_mail_input_ 的元素 |
| //div[substring-after(@id,'-')='_224' | substring-after 匹配div中id內容在 '-' 之后等於 _224 的元素 |
| bookstore/* | 選取 bookstore 元素的所有子元素。 |
| //* | 選取文檔中的所有元素 |
| //title[@*] | 選取所有帶有屬性的 title 元素。 |
| //input[@*='radio'] | 選取所有屬性值中有radio的input元素 |
| //book/title | //book/price | 選取 book 元素的所有 title 和 price 元素。 |
| //title | //price | 選取文檔中的所有 title 和 price 元素。 |
| /bookstore/book/title | //price | 選取屬於 bookstore 元素的 book 元素的所有 title 元素，以及文檔中所有的 price 元素。 |
XPath 軸
軸可定義相對於當前節點的節點集。
| 軸名稱 | 結果 |
|---|---|
| ancestor | 選取當前節點的所有先輩（父、祖父等）。 |
| ancestor-or-self | 選取當前節點的所有先輩（父、祖父等）以及當前節點本身。 |
| child | 選取當前節點的所有子元素。 |
| descendant | 選取當前節點的所有后代元素（子、孫等）。 |
| descendant-or-self | 選取當前節點的所有后代元素（子、孫等）以及當前節點本身。 |
| following | 選取文檔中當前節點的結束標簽之后的所有節點。 |
| parent | 選取當前節點的父節點。 |
| preceding | 選取文檔中當前節點的開始標簽之前的所有節點。 |
| preceding-sibling | 選取當前節點之前的所有同級節點。 |
| self | 選取當前節點。 |
語法：
軸名稱::節點測試[謂語]
實例
| 例子 | 結果 |
|---|---|
| //div[@id='ls']/child::span | 選取所有id=ls的div節點的子元素 span 節點（div的子節點） |
| //span/parent::div | 選取span的父節點是div的所有節點 |
| //span/ancestor::tr | 選擇span節點的所有 tr 先輩 |
| //div[@id='ls']/descendant::a | 選取div節點的所有 a 后代 |
| //div[@id='ls']/descendant-or-self::a | 選取div節點的所有 a 后代以及自己本身 |
| //div[@id='ls']/ancestor-or-self::td | 選取div節點的所有 td 先輩以及自己本身 |
| //span[@id='sf']/preceding-sibling::span | 選取當前節點之前的所有同級 span 節點 |
| //span[@id='sf']/following-sibling::span | 選取當前節點之后的所有同級 span 節點 |
| //span[@id='sf']/preceding::a | 選取當前span節點之前的所有 a 節點 |
| //span[@id='sf']/following::a | 選取當前span節點之后的所有 a 節點 |
| //span[@id='sf']/self::span | 選取當前節點span自己 |