免費(fèi)AI編程助手
XPath 備忘單
2021-08-30 15:08 更新
這是一個(gè)XPath選擇器備忘單，其中列出了常用的 XPath 定位方法和 CSS 選擇器
XPath 選擇器
入門
- Xpath 測(cè)試臺(tái) (whitebeam.org)
在 Firefox 或 Chrome 控制臺(tái)中測(cè)試：
$x('/html/body')
$x('//h1')
$x('//h1')[0].innerText
$x('//a[text()="XPath"]')[0].click()
后代選擇器
| Xpath | CSS |
|---|---|
//h1 |
小時(shí)1 |
//div//p |
分壓 |
//ul/li |
ul > li |
//ul/li/a |
ul > li > a |
//div/* |
div > * |
/ |
：根 |
/html/body |
:root > 身體 |
下標(biāo)選擇器
| Xpath | CSS |
|---|---|
//ul/li[1] | ul > li:first-child |
//ul/li[2] | ul > li:nth-child(2) |
//ul/li[last()] | ul > li:last-child |
//li[@id="id"][1] | li#id:first-child |
//a[1] | a:first-child |
//a[last()] | a:last-child |
屬性選擇器
| Xpath | CSS |
|---|---|
//*[@id="id"] | #id |
//*[@class="class"] | .class |
//input[@type="submit"] | input[type="submit"] |
//a[@id="abc"][@for="xyz"] | a#abc[for="xyz"] |
//a[@rel] | a[rel] |
//a[starts-with(@href, '/')] | a[href^='/'] |
//a[ends-with(@href, '.pdf')] | a[href$='pdf'] |
//a[contains(@href, '://')] | a[href*='://'] |
//a[contains(@rel, 'help')] | a[rel~='help'] |
相鄰兄弟選擇
| Xpath | CSS |
|---|---|
//h1/following-sibling::ul |
h1~ul |
//h1/following-sibling::ul[1] |
h1 + ul |
//h1/following-sibling::[@id="id"] |
h1 ~ #id |
jQuery
| Xpath | CSS |
|---|---|
//ul/li/.. |
$('ul > li').parent() |
//li/ancestor-or-self::section |
$('li').closest('section') |
//a/@href |
$('a').attr('href') |
//span/text() |
$('span').text() |
雜項(xiàng)選擇器
| Xpath | CSS |
|---|---|
//h1[not(@id)] | h1:not([id]) |
//button[text()="Submit"] | Text match |
//button[contains(text(),"Go")] | Text contains (substring) |
//product[@price > 2.50] | Arithmetic |
//ul[*] | Has children |
//ul[li] | Has children (specific) |
//a[@name or @href] | Or logic |
//a | //div | Union (joins results) |
XPath 表達(dá)式
步驟（Step）和軸（Axis）
// | ul | / | a[@id='link'] |
| Axis | Step | Axis | Step |
前綴
| 字首 | 例子 | 意思 |
|---|---|---|
// |
//hr[@class='edge'] |
任何地方 |
/ |
/html/body/div |
根 |
./ |
./div/p |
相對(duì)的 |
軸
| 軸 | 例子 | 意思 |
|---|---|---|
/ |
//ul/li/a |
孩子 |
// |
//[@id="list"]//a |
后代 |
XPath 謂語(yǔ)
謂語(yǔ)
//div[true()]
//div[@class="head"]
//div[@class="head"][@id="top"]
僅當(dāng)某些條件為真時(shí)才限制節(jié)點(diǎn)集。它們可以被鏈接起來(lái)。
運(yùn)算符
# Comparison
//a[@id = "xyz"]
//a[@id != "xyz"]
//a[@price > 25]
# Logic (and/or)
//div[@id="head" and position()=2]
//div[(x and y) or not(z)]
使用節(jié)點(diǎn)
# Use them inside functions
//ul[count(li) > 2]
//ul[count(li[@class='hide']) > 0]
# Returns `<ul>` that has a `<li>` child
//ul[li]
您可以在謂詞中使用節(jié)點(diǎn)。
索引
//a[1] # first <a>
//a[last()] # last <a>
//ol/li[2] # second <li>
//ol/li[position()=2] # same as above
//ol/li[position()>1] #:not(:first-child)
使用[]帶數(shù)字或last()或position()。
鏈?zhǔn)巾樞?/font>
a[1][@href='/']
a[@href='/'][1]
順序很重要，這兩者是不同的。
嵌套謂語(yǔ)
//section[.//h1[@id='hi']]
<section>如果它有一個(gè)<h1>后代，則返回id='hi'。
XPath 函數(shù)
節(jié)點(diǎn)函數(shù)
name() # //[starts-with(name(), 'h')]
text() # //button[text()="Submit"]
# //button/text()
lang(str)
namespace-uri()
count() # //table[count(tr)=1]
position() # //ol/li[position()=2]
字符串函數(shù)
contains() # font[contains(@class,"head")]
starts-with() # font[starts-with(@class,"head")]
ends-with() # font[ends-with(@class,"head")]
concat(x,y)
substring(str, start, len)
substring-before("01/02", "/") #=> 01
substring-after("01/02", "/") #=> 02
translate()
normalize-space()
string-length()
布爾函數(shù)
not(expr) # button[not(starts-with(text(),"Submit"))]
類型轉(zhuǎn)換
string()
number()
boolean()
XPath 軸
使用軸
//ul/li # ul > li
//ul/child::li # ul > li (same)
//ul/following-sibling::li # ul ~ li
//ul/descendant-or-self::li # ul li
//ul/ancestor-or-self::li # $('ul').closest('li')
// |
ul |
/child:: |
li |
| Axis | Step | Axis | Step |
表達(dá)式的步驟由 分隔/，通常用于選擇子節(jié)點(diǎn)。這并不總是正確的：您可以使用::.
子軸
# both the same
//ul/li/a
//child::ul/child::li/child::a
child::是默認(rèn)軸。這使//a/b/c工作。
# both the same
# this works because `child::li` is truthy
//ul[li]
//ul[child::li]
# both the same
//ul[count(li) > 2]
//ul[count(child::li) > 2]
后代或自我軸
# both the same
//div//h4
//div/descendant-or-self::h4
//是descendant-or-self::軸的縮寫(xiě)。
# both the same
//ul//[last()]
//ul/descendant-or-self::[last()]
其他軸
| 軸 | 縮寫(xiě) | 筆記 |
|---|---|---|
ancestor |
||
ancestor-or-self |
||
attribute |
@ |
@href 是簡(jiǎn)稱 attribute::href |
child |
div 是簡(jiǎn)稱 child::div |
|
descendant |
||
descendant-or-self |
// |
// 是簡(jiǎn)稱 /descendant-or-self::node()/ |
namespace |
||
self |
. |
. 是簡(jiǎn)稱 self::node() |
parent |
.. |
.. 是簡(jiǎn)稱 parent::node() |
following |
||
following-sibling |
||
preceding |
||
preceding-sibling |
您還可以使用其他軸。
Union（|）運(yùn)算符
//a | //span
使用|連接兩個(gè)表達(dá)式。
XPath 更多例子
例子
//* # all elements
count(//*) # count all elements
(//h1)[1]/text() # text of the first h1 heading
//li[span] # find a <li> with an <span> inside it
# ...expands to //li[child::span]
//ul/li/.. # use .. to select a parent
獲取父級(jí)
//section[h1[@id='section-name']]
找到一個(gè)<section>直接包含的h1#section-name
//section[//h1[@id='section-name']]
查找<section>包含h1#section-name. （同上，但使用后代或自我而不是孩子）
最近的
./ancestor-or-self::[@class="box"]
像 jQuery 的$().closest('.box').
屬性
//item[@price > 2*@discount]
查找<item>并檢查其屬性
另見(jiàn)
- Devhints (devhints.io)
- Xpath 測(cè)試臺(tái) (whitebeam.org)
以上內(nèi)容是否對(duì)您有幫助：
更多建議：