在 Firefox 或 Chrome 控制台中测试：
$x('/html/body')
$x('//h1')
$x('//h1')[0].innerText
$x('//a[text()="XPath"]')[0].click()
| Xpath | CSS |
|---|---|
//h1 |
小时1 |
//div//p |
分压 |
//ul/li |
ul > li |
//ul/li/a |
ul > li > a |
//div/* |
div > * |
/ |
：根 |
/html/body |
:root > 身体 |
| 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 |
| Xpath | CSS |
|---|---|
//ul/li/.. |
$('ul > li').parent() |
//li/ancestor-or-self::section |
$('li').closest('section') |
//a/@href |
$('a').attr('href') |
//span/text() |
$('span').text() |
| 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) |
// | ul | / | a[@id='link'] |
| Axis | Step | Axis | Step |
| 字首 | 例子 | 意思 |
|---|---|---|
// |
//hr[@class='edge'] |
任何地方 |
/ |
/html/body/div |
根 |
./ |
./div/p |
相对的 |
| 轴 | 例子 | 意思 |
|---|---|---|
/ |
//ul/li/a |
孩子 |
// |
//[@id="list"]//a |
后代 |
//div[true()]
//div[@class="head"]
//div[@class="head"][@id="top"]
仅当某些条件为真时才限制节点集。它们可以被链接起来。
# 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)]
# Use them inside functions
//ul[count(li) > 2]
//ul[count(li[@class='hide']) > 0]
# Returns `<ul>` that has a `<li>` child
//ul[li]
您可以在谓词中使用节点。
//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)
使用[]带数字或last()或position()。
a[1][@href='/']
a[@href='/'][1]
顺序很重要，这两者是不同的。
//section[.//h1[@id='hi']]
<section>如果它有一个<h1>后代，则返回id='hi'。
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]
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()
not(expr) # button[not(starts-with(text(),"Submit"))]
string()
number()
boolean()
//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 |
表达式的步骤由 分隔/，通常用于选择子节点。这并不总是正确的：您可以使用::.
# both the same
//ul/li/a
//child::ul/child::li/child::a
child::是默认轴。这使//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::轴的缩写。
# both the same
//ul//[last()]
//ul/descendant-or-self::[last()]
| 轴 | 缩写 | 笔记 |
|---|---|---|
ancestor |
||
ancestor-or-self |
||
attribute |
@ |
@href 是简称 attribute::href |
child |
div 是简称 child::div |
|
descendant |
||
descendant-or-self |
// |
// 是简称 /descendant-or-self::node()/ |
namespace |
||
self |
. |
. 是简称 self::node() |
parent |
.. |
.. 是简称 parent::node() |
following |
||
following-sibling |
||
preceding |
||
preceding-sibling |
您还可以使用其他轴。
//a | //span
使用|连接两个表达式。
//* # 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
//section[h1[@id='section-name']]
找到一个<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>并检查其属性