feat: add xpath.md cheatsheet.
This commit is contained in:
jaywcjlove
parent
3dfb4f90a3
commit
d39380a07f
@ -23,6 +23,7 @@ Quick Reference
|
||||
[Sketch](./docs/sketch.md)<!--rehype:style=background: rgb(223 148 0/var(\-\-bg\-opacity));-->
|
||||
[Jest](./docs/jest.md)<!--rehype:style=background: rgb(153 66 91/var(\-\-bg\-opacity));-->
|
||||
[VSCode](./docs/vscode.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
|
||||
[XPath](./docs/xpath.md)<!--rehype:style=background: rgb(91 163 230/var(\-\-bg\-opacity));-->
|
||||
<!--rehype:class=home-card-->
|
||||
|
||||
## Linux 命令
|
||||
|
||||
389
docs/xpath.md
Normal file
389
docs/xpath.md
Normal file
@ -0,0 +1,389 @@
|
||||
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)_
|
||||
@ -80,6 +80,10 @@ table thead {
|
||||
display: none;
|
||||
border-bottom: solid 1px rgba(85,102,119,0.3);
|
||||
}
|
||||
table td:first-child>code {
|
||||
--text-opacity: 1;
|
||||
color: rgb(5 150 105/var(--text-opacity));
|
||||
}
|
||||
|
||||
table.show-header thead {
|
||||
display: table-header-group;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user