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/body |
|
// |
从任意节点开始选取，不考虑层级关系 |
//div |
|
. |
选取当前节点 |
|
|
.. |
选取当前节点的父节点 |
//select/.. 选择select节点的所有父节点 |
|
@ |
选取属性，或者根据属性选取 |
//select[@id='select'] 选择id=select的节点 |
|
* |
通配符，表示任意节点或任意属性 |
|
|
jquery语法 |
xpath语法 |
|
$("h1") |
//h1 |
|
$("div p") |
//div//p |
|
$("ul > li") |
//ul/li |
|
$("ul > li > a") |
//ul/li/a |
|
$("div > *") |
//div/* |
|
$(":root") |
/ |
|
$(":root > body") |
/body |
|
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')] |
|
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"] |
|
jquery语法 |
xpath语法 |
|
$("h1 ~ ul") |
//h1/following-sibling::ul |
|
$("h1 + ul") |
//h1/following-sibling::ul[1] |
|
$("h1 ~ #id") |
//h1/following-sibling::[@id="id"] |
|
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() |
京公网安备 11010802035086号