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 是根節(jié)點，所有的其他元素節(jié)點都是從根節(jié)點發(fā)出的。其他的元素都是這棵樹上的節(jié)點Node，每個節(jié)點還可能有屬性和文本。
而路徑就是指某個節(jié)點到另一個節(jié)點的路線。
Xpath的路徑分為相對路徑和絕對路徑
- 相對路徑：相對路徑是從任意節(jié)點開始到目標路徑結束
- 絕對路徑：是從 HTML 根節(jié)點開始算
2、基本語法
|
表達式 |
描述 |
示例 |
|
/ |
從根節(jié)點開始選取 |
/html/body |
|
// |
從任意節(jié)點開始選取，不考慮層級關系 |
//div |
|
. |
選取當前節(jié)點 |
|
|
.. |
選取當前節(jié)點的父節(jié)點 |
//select/.. 選擇select節(jié)點的所有父節(jié)點 |
|
@ |
選取屬性，或者根據(jù)屬性選取 |
//select[@id='select'] 選擇id=select的節(jié)點 |
|
* |
通配符，表示任意節(jié)點或任意屬性 |
|
3、Xpath速查表
通過jquery語法和xpath語法比對實現(xiàn)速查
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")] |
|
算數(shù)匹配 |
//product[@price > 2.50] |
|
是否有子節(jié)點 |
//ul[*] |
|
存在子節(jié)點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() |
