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>
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() |