1、什么是Xpath
XPath 是一门在 XML 文档中查找信息的语言。
所谓 Xpath,是指 XML path language,path 就是路径, Xpath 主要是通过路径来查找元素。
咱们先看一个HTML结构
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Xpath</title>
</head>
<body id="body">
<div id="div1">
<form id="form">
<ul id="ul">
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
</ul>
<select id="select">
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</div>
<div id="div2">
<form id="form2">
<ul id="ul2">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<select id="select2">
<option></option>
<option></option>
<option></option>
<option></option>
</select>
</form>
</div>
</body>
</html>
![](https://img-blog.csdnimg.cn/256ec937049b45838fd0a07744a3d3b6.png)
HTML 的结构就是树形结构,HTML 是根节点,所有的其他元素节点都是从根节点发出的。其他的元素都是这棵树上的节点Node
,每个节点还可能有属性和文本。
而路径就是指某个节点到另一个节点的路线。
Xpath的路径分为相对路径和绝对路径
- 相对路径:相对路径是从任意节点开始到目标路径结束
- 绝对路径:是从 HTML 根节点开始算
2、基本语法
表达式 | 描述 | 示例 |
/ | 从根节点开始选取 | /html/body |
// | 从任意节点开始选取,不考虑层级关系 | //div |
. | 选取当前节点 | |
.. | 选取当前节点的父节点 | //select/.. 选择select节点的所有父节点 |
@ | 选取属性,或者根据属性选取 | //select[@id='select'] 选择id=select的节点 |
* | 通配符,表示任意节点或任意属性 | |
3、Xpath速查表
通过jquery语法和xpath语法比对实现速查
3.1、后代选择器
jquery语法 | xpath语法 |
$("h1") | //h1 |
$("div p") | //div//p |
$("ul > li") | //ul/li |
$("ul > li > a") | //ul/li/a |
$("div > *") | //div/* |
$(":root") | / |
$(":root > body") | /body |
3.2、属性选择器
jquery语法 | xpath语法 |
$("#id") | //*[@id="id"] |
$(".class") | //*[@class="class"] |
$("input[type="submit"]") | //input[@type="submit"] |
$("a#abc[for="xyz"]") | //a[@id="abc"][@for="xyz"] |
$("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')] |
3.3、顺序选择器
jquery语法 | xpath语法 |
$("ul > li:first-of-type") | //ul/li[1] |
$("ul > li:nth-of-type(2)") | //ul/li[2] |
$("ul > li:last-of-type") | //ul/li[last()] |
$("li#id:first-of-type") | //li[1][@id="id"] |
$("a:first-child") | //*[1][name()="a"] |
$("a:last-child") | //*[last()][name()="a"] |
3.4、同级选择
jquery语法 | xpath语法 |
$("h1 ~ ul") | //h1/following-sibling::ul |
$("h1 + ul") | //h1/following-sibling::ul[1] |
$("h1 ~ #id") | //h1/following-sibling::[@id="id"] |
3.5、其他
jquery语法/描述 | xpath语法 |
$("h1:not([id])") | //h1[not(@id)] |
文本全匹配 | //button[text()="Submit"] |
文本模糊匹配 | //button[contains(text(),"Go")] |
算数匹配 | //product[@price > 2.50] |
是否有子节点 | //ul[*] |
存在子节点li | //ul[li] |
or 匹配 | //a[@name or @href] |
多种结果聚合 | //a | //div |
$('ul > li').parent() | //ul/li/.. |
$('li').closest('section') | //li/ancestor-or-self::section |
$('a').attr('href') | //a/@href |
$('span').text() | //span/text() |