XPath选择器
测试样例
<html>
<head>
<base href='http://example.com/' />
<title>测试样例</title>
</head>
<body>
<h1>标题</h1>
<div id='images-id' class='image-class'>
<a href='image1.html'><p id='p-id-1' class='p-class'>名称: 图片 1</p> <br /><img src='image1_thumb.jpg' /></a>
<img src='image2_before_thumb.jpg' />图片 2 前面的图
<a href='image2.html'><p id='id-p-2'>名称: 图片 2</p> <br /><img src='image2_thumb.jpg' /></a>
<img src='image2_behind_thumb.jpg' />图片 2 后面的图
<a href='image3'><p id='p-id-3' class='p-class'>名称: 图片 3</p> <br /><img src='image3_thumb.jpg' /></a>
<a href='image4'>名称: 图片 4 <br /><img src='image4_thumb.jpg' /></a>
<a href='image5.html'>名称: 图片 5 <br /><img src='image5_thumb.jpg' /></a>
</div>
</body>
<script>
// 这里是脚本内容
var content = '测试样例'
console.log(content)
</script>
</html>XPath
XPath 的意思是 XML 路径语言（XML Path Language）。它使用的一个非 XML 语法提供一种灵活地定位 XML (en-US) 文档的不同部分的方法。它同时也可以用于检测文档中某个节点是否与某个模式（pattern）匹配。
XPath 主要被用于 XSLT，也可用于定位文档元素，像类 XML 语言文档（如 HTML 和 XUL ) 通过 DOM (en-US) 定位元素一样。替代
document.getElementById方法、element.childNodes属性和其他 DOM 核心特性。XPath 使用路径标识符通过层级结构来导航 XML 文档。它使用非 XML 语法，以致于它可以被用在 URIs 和 XML 属性值上。
XPath 节点
基本值
基本值（或称原子值，Atomic value）是无父或无子的节点。
样例中，例如 标题 、 p-class
节点
在 XPath 中，有七种类型的节点：元素、属性、文本、命名空间、处理指令、注释以及文档（根）节点。
样例中，例如 <html> （文档节点） 、 <h1>标题</h1>（元素节点）、 class='p-class' （属性节点）
节点关系
- 父（Parent）：当前节点的上一级节点，每个元素以及属性都有一个父节点
- 子（Children）：当前节点的下一级节点，元素节点可有零个、一个或多个子节点
- 同胞（Sibling）：当前节点的同级节点，拥有相同的父节点
- 先辈（Ancestor）：当前节点的所有父节点，某节点的父、父的父，父的父的父
- 后代（Descendant）：当前节点的所有子节点，某个节点的子，子的子以及子的兄弟节点
XPath 语法
常用
| 表达式 | 描述 | 样例 |
|---|---|---|
| root | 选取根节点 | html |
| / | 从根节点开始选取子节点（绝对路径的开始） | /html/head/title |
| // | 从任意节点开始取子节点（相对路径） | //title |
| . | 选取当前的节点 | //script/. |
| .. | 选取当前节点的父节点 | //script/.. |
| @ | 选取属性 | //p[@class] |
| * | 通配符, 表示元素节点 | //*[@class]//p[@*] |
| | | 返回节点集合 | `//p[@*] |
运算符
XPath 函数
详见 👉 https://developer.mozilla.org/en-US/docs/Web/XPath/Functions
常用
| 函数名 | 描述 | 样例 |
|---|---|---|
text() |
节点的文本 | //p[@id='id-p-2']/text() |
string() |
节点内，所有节点文本内容 | string(//div[@class="image-class"]) |
contains() |
包含某个字符串的节点 | //p[contains(@class,"p-class")] |
not() and() |
选取 img 但src中不包括 before 和 behind | //img[@src and not(contains(@src,"_before_")) and not(contains(@src,"_behind_"))] |
starts-with() |
选取id属性开头是 id-p 的p节点 | //p[starts-with(@id,"id-p")] |
ends-with() |
选取结尾为html后缀的a节点 | //a[ends-with(@href,".html")] xpath2.0支持，1.0不支持可用下面的//a[substring(@href, string-length(@href) - string-length('.html') +1) = '.html'] |
position() |
选取第3个位置之后的a节点 | //a[position() > 3] |
| 正则表达式（python） | 选取样例中3个p节点中的内容 | //p[re:match(@id,"[pid-]+\d")]/text() |
XPath 轴
详见 👉 https://developer.mozilla.org/en-US/docs/Web/XPath/Axes
| 轴名称 | 结果 | 样例 |
|---|---|---|
| ancestor | 选取当前节点的所有先辈（父、祖父等） | |
| ancestor-or-self | 选取当前节点的所有先辈（父、祖父等）以及当前节点本身 | |
| attribute | 选取当前节点的所有属性 | |
| self | 选取当前节点 | |
| child | 选取当前节点的所有子元素 | //a/child::p |
| parent | 选取当前节点的父节点 | |
| descendant | 选取当前节点的所有后代元素（子、孙等） | |
| descendant-or-self | 选取当前节点的所有后代元素（子、孙等）以及当前节点本身 | |
| following | 选取文档中当前节点的结束标签之后的所有节点 | //a[@href="image2.html"]/following::text() |
| following-sibling | 选取当前节点之后的所有兄弟节 | //a[@href="image3"]/following-sibling::a[1] |
| namespace | 选取当前节点的所有命名空间节点 | |
| preceding | 选取文档中当前节点的开始标签之前的所有节点 | //a[@href="image2.html"]/preceding::text() |
| preceding-sibling | 选取当前节点之前的所有同级节点 | //a[@href="image3"]/preceding-sibling::a[1] |
XPath 测试
非插件
- 浏览器的审查元素中，
Ctrl+F- 浏览器控制台，
$x(【表达式】)
插件
XPath练习
XPath选择器
https://元气码农少女酱.我爱你/434b0b17dd4f/