390 lines
9.4 KiB
Markdown
390 lines
9.4 KiB
Markdown
XPath 备忘清单
|
||
===
|
||
|
||
这是一份 XPath 选择器备忘单，其中列出了常用的 `XPath` 定位方法和 `CSS` 选择器
|
||
|
||
XPath 选择器
|
||
--------
|
||
|
||
### 入门
|
||
|
||
XPath 即为 XML 路径语言（XML Path Language），它是一种用来确定XML文档中某部分位置的计算机语言。
|
||
|
||
- [Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) _(whitebeam.org)_
|
||
|
||
在 Firefox 或 Chrome 控制台中测试：
|
||
|
||
```js
|
||
$x('/html/body')
|
||
$x('//h1')
|
||
$x('//h1')[0].innerText
|
||
$x('//a[text()="XPath"]')[0].click()
|
||
```
|
||
|
||
### 后代选择器
|
||
|
||
| Xpath | CSS |
|
||
|--------------|--------------|
|
||
| `//h1` | h1 |
|
||
| `//div//p` | div p |
|
||
| `//ul/li` | ul > li |
|
||
| `//ul/li/a` | ul > li > a |
|
||
| `//div/*` | div > * |
|
||
| `/` | :root |
|
||
| `/html/body` | :root > body |
|
||
<!--rehype:className=show-header-->
|
||
|
||
### 有序选择器
|
||
|
||
| 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 |
|
||
<!--rehype:className=show-header-->
|
||
|
||
### 属性选择器
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
|
||
| 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'] |
|
||
<!--rehype:className=show-header-->
|
||
|
||
### 兄弟姐妹选择器
|
||
|
||
| Xpath | CSS |
|
||
|--------------------------------------|----------|
|
||
| `//h1/following-sibling::ul` | h1 ~ ul |
|
||
| `//h1/following-sibling::ul[1]` | h1 + ul |
|
||
| `//h1/following-sibling::[@id="id"]` | h1 ~ #id |
|
||
<!--rehype:className=show-header-->
|
||
|
||
### 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() |
|
||
<!--rehype:className=show-header-->
|
||
|
||
### 杂项选择器
|
||
|
||
| Xpath | CSS |
|
||
|-----------------------------------|---------------------------|
|
||
| `//h1[not(@id)]` | h1:not([id]) |
|
||
| `//button[text()="Submit"]` | 文字匹配 |
|
||
| `//button[contains(text(),"Go")]` | 文本包含（子字符串） |
|
||
| `//product[@price > 2.50]` | 算术 |
|
||
| `//ul[*]` | 有孩子 |
|
||
| `//ul[li]` | 有孩子（具体） |
|
||
| `//a[@name or @href]` | 或逻辑 |
|
||
| `//a | //div` | 联合（加入结果） |
|
||
<!--rehype:className=show-header-->
|
||
|
||
XPath 表达式
|
||
-----------
|
||
|
||
### 步骤和轴
|
||
|
||
| - | - | - | - |
|
||
|------|------|------|-----------------|
|
||
| `//` | `ul` | `/` | `a[@id='link']` |
|
||
| Axis | Step | Axis | Step |
|
||
|
||
|
||
### 前缀
|
||
|
||
| 前缀 | 例子 | 意思是 |
|
||
|--------|-----------------------|----------|
|
||
| `//` | `//hr[@class='edge']` | 任何地方 |
|
||
| `/` | `/html/body/div` | 根 |
|
||
| `./` | `./div/p` | 相对的 |
|
||
<!--rehype:className=show-header-->
|
||
|
||
### Axes
|
||
|
||
| Axis(轴) | 例子 | 意思是 |
|
||
|------|---------------------|------------|
|
||
| `/` | `//ul/li/a` | 孩子 |
|
||
| `//` | `//[@id="list"]//a` | 后裔 |
|
||
<!--rehype:className=show-header-->
|
||
|
||
XPath Predicates(谓词)
|
||
----------
|
||
|
||
### Predicates(谓词)
|
||
|
||
```bash
|
||
//div[true()]
|
||
//div[@class="head"]
|
||
//div[@class="head"][@id="top"]
|
||
```
|
||
|
||
仅当某些条件为真时才限制节点集。它们可以被链接起来。
|
||
|
||
### 操作符
|
||
|
||
```bash
|
||
# 比较
|
||
//a[@id = "xyz"]
|
||
//a[@id != "xyz"]
|
||
//a[@price > 25]
|
||
```
|
||
|
||
```bash
|
||
# 逻辑 (and/or)
|
||
//div[@id="head" and position()=2]
|
||
//div[(x and y) or not(z)]
|
||
```
|
||
|
||
### 使用节点
|
||
|
||
```bash
|
||
# 在函数内部使用它们
|
||
//ul[count(li) > 2]
|
||
//ul[count(li[@class='hide']) > 0]
|
||
```
|
||
```bash
|
||
# 返回具有 `<li>` 子级的 `<ul>`
|
||
//ul[li]
|
||
```
|
||
|
||
您可以在谓词中使用节点。
|
||
|
||
### 索引
|
||
|
||
```bash
|
||
//a[1] # 第一个<a>
|
||
//a[last()] # 最后一个<a>
|
||
//ol/li[2] # 第二个<li>
|
||
//ol/li[position()=2] # 和上面一样
|
||
//ol/li[position()>1] #:not(:first-child)
|
||
```
|
||
|
||
将 `[]` 与数字一起使用，或者使用 `last()` 或 `position()`。
|
||
|
||
### 链接顺序
|
||
|
||
```bash
|
||
a[1][@href='/']
|
||
a[@href='/'][1]
|
||
```
|
||
|
||
顺序很重要，这两个是不同的。
|
||
|
||
### 嵌套谓词
|
||
|
||
```
|
||
//section[.//h1[@id='hi']]
|
||
```
|
||
|
||
如果它有一个具有 `id='hi'` 的 `<h1>` 后代，则返回 `<section>`。
|
||
|
||
XPath 函数
|
||
---------
|
||
<!--rehype:body-class=cols-2-->
|
||
|
||
### 节点功能
|
||
|
||
```bash
|
||
name() # //[starts-with(name(), 'h')]
|
||
text() # //button[text()="Submit"]
|
||
# //button/text()
|
||
lang(str)
|
||
namespace-uri()
|
||
```
|
||
```bash
|
||
count() # //table[count(tr)=1]
|
||
position() # //ol/li[position()=2]
|
||
```
|
||
|
||
### 字符串函数
|
||
|
||
```bash
|
||
contains() # font[contains(@class,"head")]
|
||
starts-with() # font[starts-with(@class,"head")]
|
||
ends-with() # font[ends-with(@class,"head")]
|
||
```
|
||
|
||
```bash
|
||
concat(x,y)
|
||
substring(str, start, len)
|
||
substring-before("01/02", "/") #=> 01
|
||
substring-after("01/02", "/") #=> 02
|
||
translate()
|
||
normalize-space()
|
||
string-length()
|
||
```
|
||
|
||
### 布尔函数
|
||
|
||
```bash
|
||
not(expr) # button[not(starts-with(text(),"Submit"))]
|
||
```
|
||
|
||
### 类型转换
|
||
|
||
```bash
|
||
string()
|
||
number()
|
||
boolean()
|
||
```
|
||
|
||
XPath Axes
|
||
----
|
||
<!--rehype:body-class=cols-2-->
|
||
|
||
### 使用轴
|
||
|
||
```bash
|
||
//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 |
|
||
|
||
表达式的步骤由 `/` 分隔，通常用于选择子节点。 这并不总是正确的：您可以使用 `::` 指定不同的“轴”。
|
||
|
||
### 子轴
|
||
|
||
```bash
|
||
# 都一样
|
||
//ul/li/a
|
||
//child::ul/child::li/child::a
|
||
```
|
||
|
||
`child::` is the default axis. This makes `//a/b/c` work.
|
||
|
||
```bash
|
||
# 都一样
|
||
# 这是因为 `child::li` 是真实的
|
||
//ul[li]
|
||
//ul[child::li]
|
||
```
|
||
|
||
```bash
|
||
# 都一样
|
||
//ul[count(li) > 2]
|
||
//ul[count(child::li) > 2]
|
||
```
|
||
|
||
### 后代或自我轴
|
||
|
||
```bash
|
||
# 都一样
|
||
//div//h4
|
||
//div/descendant-or-self::h4
|
||
```
|
||
|
||
`//` 是 `descendant-or-self::` 轴的缩写。
|
||
|
||
```bash
|
||
# 都一样
|
||
//ul//[last()]
|
||
//ul/descendant-or-self::[last()]
|
||
```
|
||
|
||
### 其他轴
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
| Axis | Abbrev | Notes |
|
||
|--------------------|--------|-------|
|
||
| `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` | | |
|
||
<!--rehype:className=show-header-->
|
||
|
||
您还可以使用其他轴。
|
||
|
||
### 联合
|
||
|
||
```bash
|
||
//a | //span
|
||
```
|
||
|
||
使用 `|` 连接两个表达式。
|
||
|
||
XPath 更多示例
|
||
-------------
|
||
<!--rehype:body-class=cols-2-->
|
||
|
||
### 示例
|
||
|
||
```bash
|
||
//* # 所有元素
|
||
count(//*) # 计算所有元素
|
||
(//h1)[1]/text() # 第一个 h1 标题的文本
|
||
//li[span] # 找到一个 <li> 里面有一个 <span>
|
||
# ...扩展到 //li[child::span]
|
||
//ul/li/.. # 使用 .. 选择父级
|
||
```
|
||
|
||
### 查找(父)家长
|
||
|
||
```bash
|
||
//section[h1[@id='section-name']]
|
||
```
|
||
|
||
查找直接包含 `h1#section-name` 的 `<section>`
|
||
|
||
```bash
|
||
//section[//h1[@id='section-name']]
|
||
```
|
||
|
||
查找包含 `h1#section-name` 的 `<section>`。
|
||
（与上面相同，但使用后代或自我而不是孩子）
|
||
|
||
### 最近的
|
||
|
||
```bash
|
||
./ancestor-or-self::[@class="box"]
|
||
```
|
||
|
||
像 `jQuery` 的 `$().closest('.box')` 一样工作。
|
||
|
||
### 属性
|
||
|
||
```bash
|
||
//item[@price > 2*@discount]
|
||
```
|
||
|
||
查找 `<item>` 并检查其属性
|
||
|
||
另见
|
||
--------
|
||
|
||
* [Devhints](https://devhints.io/xpath) _(devhints.io)_
|
||
* [Xpath test bed](http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm) _(whitebeam.org)_
|