XPath: XML/HTML 路径查找语言
更新时间：2021-03-02 17:32:44 标签：xpath
xml
html
说明
Web 前端教程 正在筹划中，欢迎大家加微信 gairuo123 提供意见、建议、纠错、催更。
XPath，全称 XML Path Language，即 XML 路径语言，它是一门在 XML 文档中查找信息的语言。最初是用来搜寻 XML 文档的，但同样适用于 HTML 文档的搜索。XPath 于 1999 年 11 月 16 日 成为 W3C 标准。
用途
XPath 使用路径表达式来选取 XML 文档中的节点或者节点集。这些路径表达式和我们在常规的电脑文件系统中看到的表达式非常相似。最为典型的用途为：
- 使用路径表达式在 XML 文档中进行导航
- 前端页面开发，查找页面节点
- 网页爬虫信息抽取（如很多 Python 数据解析库支持）
通过简单明了的路径选择表达式，XPath 有十分强大的选取功能。它同时提供 100 多个内建函数，对字符串、数值、时间可以完成匹配以及对节点、序列进行处理。
本文以 HTML 为例进行讲解。
基本格式
XPath 的基本格式为：
Xpath=//tagname[@attribute='value']
其中：
//: 选择当前节点Tagname: 特定节点的标记名@: 选择属性Attribute: 节点的属性名称Value: 属性的值
要准确查找网页上的元素，有不同类型的定位器。通过 Xpath 查询到的内容一般会返回一 array 对象，它是一个类似列表的数据，可以执行切片操作，每个元素中存有相关的数据值。
类型
XPath 有两种类型：
- 绝对 XPath
- 相对 XPath
绝对 XPath
这是查找元素的直接方法，但是绝对 XPath 的缺点是，如果元素的路径发生任何更改，那么 XPath 就会失败。XPath 的关键特性是它以单个正斜杠（/）开头，这意味着您可以从根节点选择元素。
/html/body/div[6]/div/h2[3]/b[1]
相对 XPath
相对 Xpath 从 html dom 结构的部分内容开始，以双正斜杠（//）开头。它可以搜索网页上任何地方的元素，这意味着不需要编写很长的 xpath 表达式。因为它不是根元素的完整路径，所以相对 Xpath 是最为常用的。
下面是相对 XPath表达式的示例：
//div[@class='featured-box cloumnsize1']//h4[1]//b[1]
节点
节点（Node）：XML 文档中的每个成分被称为一个节点。XPath 对树状的结构中的节点定义了以下几种类型：元素、属性、文本、命名空间、处理指令、注释以及文档节点（或称为根节点）。
XPath 轴
XPath 轴（Axes）从当前上下文节点搜索 XML 文档中的不同节点。XPath 轴是用来查找动态元素的方法，否则没有 ID、Classname、Name 等的普通 XPath 方法就不可能找到动态元素。
Axes 方法用于查找那些在刷新或任何其他操作时动态更改的元素。
选择
以下是一些选择的示例：
后代选择器 Descendant selectors
| 结构 | 表达式 | 说明 |
|---|---|---|
h1 |
//h1 |
搜索所在 h1 标签 |
div p |
//div//p |
搜索所有 div 标签下的 p 标签 |
ul > li |
//ul/li |
类似以上 |
ul > li > a |
//ul/li/a |
类似以上 |
div > * |
//div/* |
div 标签下所有的节点 |
:root |
/ |
根节点 |
:root > body |
/body |
根节点下的 body 标签 |
属性选择器 Attribute selectors
| 结构 | 表达式 | 说明 |
|---|---|---|
#id |
//*[@id="id"] |
所有指定id的 |
.class |
//*[@class="class"] |
所有指定class的 |
input[type="submit"] |
//input[@type="submit"] |
所有指定类型组件的 |
a#abc[for="xyz"] |
//a[@id="abc"][@for="xyz"] |
? |
a[rel] |
//a[@rel] |
a 标签有 rel 属性的 |
a[href^='/'] |
//a[starts-with(@href, '/')] |
? |
a[href$='pdf'] |
//a[ends-with(@href, '.pdf')] |
|
a[href*='://'] |
//a[contains(@href, '://')] |
|
a[rel~='help'] |
//a[contains(@rel, 'help')] |
XPath 表达式根据 XML 文档中的ID、Name、Classname 等属性选择节点或节点列表，如下所示：
//input[@name="uuid"]
//input[@type="text"]
//label[@id="idname"]
//input[@value="search"]
//*[@class="gairuobody"]
//a[@href="https://www.gairuo.com/"]
//img[@src="//www.gairuo.com/file/home/js.png"]
todo
todo
todo
todo
操作
在 Chrome、火狐 Firefox 等浏览器中，在控制台 console 可以用 $x('//div')（括号中的引内为表达式）使用测试 XPATH
参考
- 官方文档：https://www.w3.org/TR/xpath/
- https://www.w3school.com.cn/xpath/xpath_syntax.asp
- https://devhints.io/xpath
