Files
reference/docs/xpath.html
2022-10-01 04:00:08 +00:00

591 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>XPath 备忘清单
&#x26; xpath cheatsheet &#x26; Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="这是一份 XPath 选择器备忘单,其中列出了常用的 &#x60;XPath&#x60; 定位方法和 &#x60;CSS&#x60; 选择器为开发人员分享快速参考备忘单。">
<meta keywords="Quick,Reference,cheatsheet,xpath">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20opacity%3D%22.4%22%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23777%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23999%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="../style/style.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
<path opacity=".4" d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="currentColor"></path>
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="currentColor"></path>
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="currentColor"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="https://github.com/jaywcjlove/reference/blob/main/docs/xpath.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script>
const LOCAL_NANE = '_dark_mode_theme_'
const rememberedValue = localStorage.getItem(LOCAL_NANE);
if (rememberedValue && ['light', 'dark'].includes(rememberedValue)) {
document.documentElement.setAttribute('data-color-mode', rememberedValue);
}
const button = document.querySelector('#darkMode');
button.onclick = () => {
const theme = document.documentElement.dataset.colorMode;
const mode = theme === 'light' ? 'dark' : 'light';
document.documentElement.setAttribute('data-color-mode', mode);
localStorage.setItem(LOCAL_NANE, mode);
}
</script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap max-container"><header class="wrap-header h1wrap"><h1 id="xpath-备忘清单"><a aria-hidden="true" tabindex="-1" href="#xpath-备忘清单"><span class="icon icon-link"></span></a>XPath 备忘清单</h1><div class="wrap-body">
<p>这是一份 XPath 选择器备忘单,其中列出了常用的 <code>XPath</code> 定位方法和 <code>CSS</code> 选择器</p>
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="xpath-选择器"><a aria-hidden="true" tabindex="-1" href="#xpath-选择器"><span class="icon icon-link"></span></a>XPath 选择器</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h3><div class="wrap-body">
<p>XPath 即为 XML 路径语言XML Path Language它是一种用来确定XML文档中某部分位置的计算机语言。</p>
<ul>
<li><a href="http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm">Xpath test bed</a> <em>(whitebeam.org)</em></li>
</ul>
<p>在 Firefox 或 Chrome 控制台中测试:</p>
<pre class="language-js"><code class="language-js code-highlight"><span class="code-line line-number" line="1"><span class="token function">$x</span><span class="token punctuation">(</span><span class="token string">'/html/body'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2"><span class="token function">$x</span><span class="token punctuation">(</span><span class="token string">'//h1'</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3"><span class="token function">$x</span><span class="token punctuation">(</span><span class="token string">'//h1'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token property-access">innerText</span>
</span><span class="code-line line-number" line="4"><span class="token function">$x</span><span class="token punctuation">(</span><span class="token string">'//a[text()="XPath"]'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token method function property-access">click</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="后代选择器"><a aria-hidden="true" tabindex="-1" href="#后代选择器"><span class="icon icon-link"></span></a>后代选择器</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Xpath</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//h1</code></td>
<td>h1</td>
</tr>
<tr>
<td><code>//div//p</code></td>
<td>div p</td>
</tr>
<tr>
<td><code>//ul/li</code></td>
<td>ul > li</td>
</tr>
<tr>
<td><code>//ul/li/a</code></td>
<td>ul > li > a</td>
</tr>
<tr>
<td><code>//div/*</code></td>
<td>div > *</td>
</tr>
<tr>
<td><code>/</code></td>
<td>:root</td>
</tr>
<tr>
<td><code>/html/body</code></td>
<td>:root > body</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="有序选择器"><a aria-hidden="true" tabindex="-1" href="#有序选择器"><span class="icon icon-link"></span></a>有序选择器</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Xpath</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//ul/li[1]</code></td>
<td>ul > li:first-child</td>
</tr>
<tr>
<td><code>//ul/li[2]</code></td>
<td>ul > li:nth-child(2)</td>
</tr>
<tr>
<td><code>//ul/li[last()]</code></td>
<td>ul > li:last-child</td>
</tr>
<tr>
<td><code>//li[@id="id"][1]</code></td>
<td>li#id:first-child</td>
</tr>
<tr>
<td><code>//a[1]</code></td>
<td>a:first-child</td>
</tr>
<tr>
<td><code>//a[last()]</code></td>
<td>a:last-child</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="属性选择器"><a aria-hidden="true" tabindex="-1" href="#属性选择器"><span class="icon icon-link"></span></a>属性选择器</h3><div class="wrap-body"><!--rehype:wrap-class=col-span-2 row-span-2-->
<table class="show-header">
<thead>
<tr>
<th>Xpath</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//*[@id="id"]</code></td>
<td>#id</td>
</tr>
<tr>
<td><code>//*[@class="class"]</code></td>
<td>.class</td>
</tr>
<tr>
<td><code>//input[@type="submit"]</code></td>
<td>input[type="submit"]</td>
</tr>
<tr>
<td><code>//a[@id="abc"][@for="xyz"]</code></td>
<td>a#abc[for="xyz"]</td>
</tr>
<tr>
<td><code>//a[@rel]</code></td>
<td>a[rel]</td>
</tr>
<tr>
<td><code>//a[starts-with(@href, '/')]</code></td>
<td>a[href^='/']</td>
</tr>
<tr>
<td><code>//a[ends-with(@href, '.pdf')]</code></td>
<td>a[href$='pdf']</td>
</tr>
<tr>
<td><code>//a[contains(@href, '://')]</code></td>
<td>a[href*='<code>:</code>//']</td>
</tr>
<tr>
<td><code>//a[contains(@rel, 'help')]</code></td>
<td>a[rel~='help']</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="兄弟姐妹选择器"><a aria-hidden="true" tabindex="-1" href="#兄弟姐妹选择器"><span class="icon icon-link"></span></a>兄弟姐妹选择器</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Xpath</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//h1/following-sibling::ul</code></td>
<td>h1 ~ ul</td>
</tr>
<tr>
<td><code>//h1/following-sibling::ul[1]</code></td>
<td>h1 + ul</td>
</tr>
<tr>
<td><code>//h1/following-sibling::[@id="id"]</code></td>
<td>h1 ~ #id</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="jquery"><a aria-hidden="true" tabindex="-1" href="#jquery"><span class="icon icon-link"></span></a>jQuery</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Xpath</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//ul/li/..</code></td>
<td>$('ul > li').parent()</td>
</tr>
<tr>
<td><code>//li/ancestor-or-self::section</code></td>
<td>$('li').closest('section')</td>
</tr>
<tr>
<td><code>//a/@href</code></td>
<td>$('a').attr('href')</td>
</tr>
<tr>
<td><code>//span/text()</code></td>
<td>$('span').text()</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="杂项选择器"><a aria-hidden="true" tabindex="-1" href="#杂项选择器"><span class="icon icon-link"></span></a>杂项选择器</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Xpath</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//h1[not(@id)]</code></td>
<td>h1:not([id])</td>
</tr>
<tr>
<td><code>//button[text()="Submit"]</code></td>
<td>文字匹配</td>
</tr>
<tr>
<td><code>//button[contains(text(),"Go")]</code></td>
<td>文本包含(子字符串)</td>
</tr>
<tr>
<td><code>//product[@price > 2.50]</code></td>
<td>算术</td>
</tr>
<tr>
<td><code>//ul[*]</code></td>
<td>有孩子</td>
</tr>
<tr>
<td><code>//ul[li]</code></td>
<td>有孩子(具体)</td>
</tr>
<tr>
<td><code>//a[@name or @href]</code></td>
<td>或逻辑</td>
</tr>
<tr>
<td>`//a</td>
<td>//div`</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="xpath-表达式"><a aria-hidden="true" tabindex="-1" href="#xpath-表达式"><span class="icon icon-link"></span></a>XPath 表达式</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="步骤和轴"><a aria-hidden="true" tabindex="-1" href="#步骤和轴"><span class="icon icon-link"></span></a>步骤和轴</h3><div class="wrap-body">
<table>
<thead>
<tr>
<th>-</th>
<th>-</th>
<th>-</th>
<th>-</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//</code></td>
<td><code>ul</code></td>
<td><code>/</code></td>
<td><code>a[@id='link']</code></td>
</tr>
<tr>
<td>Axis</td>
<td>Step</td>
<td>Axis</td>
<td>Step</td>
</tr>
</tbody>
</table>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="前缀"><a aria-hidden="true" tabindex="-1" href="#前缀"><span class="icon icon-link"></span></a>前缀</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>前缀</th>
<th>例子</th>
<th>意思是</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//</code></td>
<td><code>//hr[@class='edge']</code></td>
<td>任何地方</td>
</tr>
<tr>
<td><code>/</code></td>
<td><code>/html/body/div</code></td>
<td></td>
</tr>
<tr>
<td><code>./</code></td>
<td><code>./div/p</code></td>
<td>相对的</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="axes"><a aria-hidden="true" tabindex="-1" href="#axes"><span class="icon icon-link"></span></a>Axes</h3><div class="wrap-body">
<table class="show-header">
<thead>
<tr>
<th>Axis(轴)</th>
<th>例子</th>
<th>意思是</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>/</code></td>
<td><code>//ul/li/a</code></td>
<td>孩子</td>
</tr>
<tr>
<td><code>//</code></td>
<td><code>//[@id="list"]//a</code></td>
<td>后裔</td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="xpath-predicates谓词"><a aria-hidden="true" tabindex="-1" href="#xpath-predicates谓词"><span class="icon icon-link"></span></a>XPath Predicates(谓词)</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="predicates谓词"><a aria-hidden="true" tabindex="-1" href="#predicates谓词"><span class="icon icon-link"></span></a>Predicates(谓词)</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//div<span class="token punctuation">[</span>true<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="2">//div<span class="token punctuation">[</span>@class<span class="token operator">=</span><span class="token string">"head"</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="3">//div<span class="token punctuation">[</span>@class<span class="token operator">=</span><span class="token string">"head"</span><span class="token punctuation">]</span><span class="token punctuation">[</span>@id<span class="token operator">=</span><span class="token string">"top"</span><span class="token punctuation">]</span>
</span></code></pre>
<p>仅当某些条件为真时才限制节点集。它们可以被链接起来。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="操作符"><a aria-hidden="true" tabindex="-1" href="#操作符"><span class="icon icon-link"></span></a>操作符</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 比较</span>
</span><span class="code-line line-number" line="2">//a<span class="token punctuation">[</span>@id <span class="token operator">=</span> <span class="token string">"xyz"</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="3">//a<span class="token punctuation">[</span>@id <span class="token operator">!=</span> <span class="token string">"xyz"</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="4">//a<span class="token punctuation">[</span>@price <span class="token operator">></span> <span class="token number">25</span><span class="token punctuation">]</span>
</span></code></pre>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 逻辑 (and/or)</span>
</span><span class="code-line line-number" line="2">//div<span class="token punctuation">[</span>@id<span class="token operator">=</span><span class="token string">"head"</span> and position<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="3">//div<span class="token punctuation">[</span><span class="token punctuation">(</span>x and y<span class="token punctuation">)</span> or not<span class="token punctuation">(</span>z<span class="token punctuation">)</span><span class="token punctuation">]</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="使用节点"><a aria-hidden="true" tabindex="-1" href="#使用节点"><span class="icon icon-link"></span></a>使用节点</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 在函数内部使用它们</span>
</span><span class="code-line line-number" line="2">//ul<span class="token punctuation">[</span>count<span class="token punctuation">(</span>li<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">2</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="3">//ul<span class="token punctuation">[</span>count<span class="token punctuation">(</span>li<span class="token punctuation">[</span>@class<span class="token operator">=</span><span class="token string">'hide'</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">0</span><span class="token punctuation">]</span>
</span></code></pre>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 返回具有 `&#x3C;li>` 子级的 `&#x3C;ul>`</span>
</span><span class="code-line line-number" line="2">//ul<span class="token punctuation">[</span>li<span class="token punctuation">]</span>
</span></code></pre>
<p>您可以在谓词中使用节点。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="索引"><a aria-hidden="true" tabindex="-1" href="#索引"><span class="icon icon-link"></span></a>索引</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//a<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment"># 第一个&#x3C;a></span>
</span><span class="code-line line-number" line="2">//a<span class="token punctuation">[</span>last<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span> <span class="token comment"># 最后一个&#x3C;a></span>
</span><span class="code-line line-number" line="3">//ol/li<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token comment"># 第二个&#x3C;li></span>
</span><span class="code-line line-number" line="4">//ol/li<span class="token punctuation">[</span>position<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token comment"># 和上面一样</span>
</span><span class="code-line line-number" line="5">//ol/li<span class="token punctuation">[</span>position<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">></span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token comment">#:not(:first-child)</span>
</span></code></pre>
<p><code>[]</code> 与数字一起使用,或者使用 <code>last()</code><code>position()</code></p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="链接顺序"><a aria-hidden="true" tabindex="-1" href="#链接顺序"><span class="icon icon-link"></span></a>链接顺序</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">a<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">[</span>@href<span class="token operator">=</span><span class="token string">'/'</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="2">a<span class="token punctuation">[</span>@href<span class="token operator">=</span><span class="token string">'/'</span><span class="token punctuation">]</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>
</span></code></pre>
<p>顺序很重要,这两个是不同的。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="嵌套谓词"><a aria-hidden="true" tabindex="-1" href="#嵌套谓词"><span class="icon icon-link"></span></a>嵌套谓词</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line line-number" line="1">//section[.//h1[@id='hi']]
</span></code></pre>
<p>如果它有一个具有 <code>id='hi'</code><code>&#x3C;h1></code> 后代,则返回 <code>&#x3C;section></code></p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="xpath-函数"><a aria-hidden="true" tabindex="-1" href="#xpath-函数"><span class="icon icon-link"></span></a>XPath 函数</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="节点功能"><a aria-hidden="true" tabindex="-1" href="#节点功能"><span class="icon icon-link"></span></a>节点功能</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">name<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># //[starts-with(name(), 'h')]</span>
</span><span class="code-line line-number" line="2">text<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># //button[text()="Submit"]</span>
</span><span class="code-line line-number" line="3"> <span class="token comment"># //button/text()</span>
</span><span class="code-line line-number" line="4">lang<span class="token punctuation">(</span>str<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="5">namespace-uri<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">count<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># //table[count(tr)=1]</span>
</span><span class="code-line line-number" line="2">position<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># //ol/li[position()=2]</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="字符串函数"><a aria-hidden="true" tabindex="-1" href="#字符串函数"><span class="icon icon-link"></span></a>字符串函数</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">contains<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># font[contains(@class,"head")]</span>
</span><span class="code-line line-number" line="2">starts-with<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># font[starts-with(@class,"head")]</span>
</span><span class="code-line line-number" line="3">ends-with<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># font[ends-with(@class,"head")]</span>
</span></code></pre>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">concat<span class="token punctuation">(</span>x,y<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2">substring<span class="token punctuation">(</span>str, start, len<span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3">substring-before<span class="token punctuation">(</span><span class="token string">"01/02"</span>, <span class="token string">"/"</span><span class="token punctuation">)</span> <span class="token comment">#=> 01</span>
</span><span class="code-line line-number" line="4">substring-after<span class="token punctuation">(</span><span class="token string">"01/02"</span>, <span class="token string">"/"</span><span class="token punctuation">)</span> <span class="token comment">#=> 02</span>
</span><span class="code-line line-number" line="5">translate<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="6">normalize-space<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="7">string-length<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="布尔函数"><a aria-hidden="true" tabindex="-1" href="#布尔函数"><span class="icon icon-link"></span></a>布尔函数</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">not<span class="token punctuation">(</span>expr<span class="token punctuation">)</span> <span class="token comment"># button[not(starts-with(text(),"Submit"))]</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="类型转换"><a aria-hidden="true" tabindex="-1" href="#类型转换"><span class="icon icon-link"></span></a>类型转换</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">string<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="2">number<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span><span class="code-line line-number" line="3">boolean<span class="token punctuation">(</span><span class="token punctuation">)</span>
</span></code></pre>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="xpath-axes"><a aria-hidden="true" tabindex="-1" href="#xpath-axes"><span class="icon icon-link"></span></a>XPath Axes</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="使用轴"><a aria-hidden="true" tabindex="-1" href="#使用轴"><span class="icon icon-link"></span></a>使用轴</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//ul/li <span class="token comment"># ul > li</span>
</span><span class="code-line line-number" line="2">//ul/child::li <span class="token comment"># ul > li (same)</span>
</span><span class="code-line line-number" line="3">//ul/following-sibling::li <span class="token comment"># ul ~ li</span>
</span><span class="code-line line-number" line="4">//ul/descendant-or-self::li <span class="token comment"># ul li</span>
</span><span class="code-line line-number" line="5">//ul/ancestor-or-self::li <span class="token comment"># $('ul').closest('li')</span>
</span></code></pre>
<hr>
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>//</code></td>
<td><code>ul</code></td>
<td><code>/child::</code></td>
<td><code>li</code></td>
</tr>
<tr>
<td>Axis</td>
<td>Step</td>
<td>Axis</td>
<td>Step</td>
</tr>
</tbody>
</table>
<p>表达式的步骤由 <code>/</code> 分隔,通常用于选择子节点。 这并不总是正确的:您可以使用 <code>::</code> 指定不同的“轴”。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="子轴"><a aria-hidden="true" tabindex="-1" href="#子轴"><span class="icon icon-link"></span></a>子轴</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 都一样</span>
</span><span class="code-line line-number" line="2">//ul/li/a
</span><span class="code-line line-number" line="3">//child::ul/child::li/child::a
</span></code></pre>
<p><code>child::</code> is the default axis. This makes <code>//a/b/c</code> work.</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 都一样</span>
</span><span class="code-line line-number" line="2"><span class="token comment"># 这是因为 `child::li` 是真实的</span>
</span><span class="code-line line-number" line="3">//ul<span class="token punctuation">[</span>li<span class="token punctuation">]</span>
</span><span class="code-line line-number" line="4">//ul<span class="token punctuation">[</span>child::li<span class="token punctuation">]</span>
</span></code></pre>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 都一样</span>
</span><span class="code-line line-number" line="2">//ul<span class="token punctuation">[</span>count<span class="token punctuation">(</span>li<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">2</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="3">//ul<span class="token punctuation">[</span>count<span class="token punctuation">(</span>child::li<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token number">2</span><span class="token punctuation">]</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="后代或自我轴"><a aria-hidden="true" tabindex="-1" href="#后代或自我轴"><span class="icon icon-link"></span></a>后代或自我轴</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 都一样</span>
</span><span class="code-line line-number" line="2">//div//h4
</span><span class="code-line line-number" line="3">//div/descendant-or-self::h4
</span></code></pre>
<p><code>//</code><code>descendant-or-self::</code> 轴的缩写。</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1"><span class="token comment"># 都一样</span>
</span><span class="code-line line-number" line="2">//ul//<span class="token punctuation">[</span>last<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
</span><span class="code-line line-number" line="3">//ul/descendant-or-self::<span class="token punctuation">[</span>last<span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">]</span>
</span></code></pre>
</div></div></div><div class="wrap row-span-2"><div class="wrap-header h3wrap"><h3 id="其他轴"><a aria-hidden="true" tabindex="-1" href="#其他轴"><span class="icon icon-link"></span></a>其他轴</h3><div class="wrap-body"><!--rehype:wrap-class=row-span-2-->
<table class="show-header">
<thead>
<tr>
<th>Axis</th>
<th>Abbrev</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>ancestor</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>ancestor-or-self</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>attribute</code></td>
<td><code>@</code></td>
<td><code>@href</code><code>attribute::href</code> 的缩写</td>
</tr>
<tr>
<td><code>child</code></td>
<td></td>
<td><code>div</code><code>child::div</code> 的缩写</td>
</tr>
<tr>
<td><code>descendant</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>descendant-or-self</code></td>
<td><code>//</code></td>
<td><code>//</code><code>/descendant-or-self::node()/</code>的缩写</td>
</tr>
<tr>
<td><code>namespace</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>self</code></td>
<td><code>.</code></td>
<td><code>.</code><code>self::node()</code> 的缩写</td>
</tr>
<tr>
<td><code>parent</code></td>
<td><code>..</code></td>
<td><code>..</code><code>parent::node()</code> 的缩写</td>
</tr>
<tr>
<td><code>following</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>following-sibling</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>preceding</code></td>
<td></td>
<td></td>
</tr>
<tr>
<td><code>preceding-sibling</code></td>
<td></td>
<td></td>
</tr>
</tbody>
</table><!--rehype:className=show-header-->
<p>您还可以使用其他轴。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="联合"><a aria-hidden="true" tabindex="-1" href="#联合"><span class="icon icon-link"></span></a>联合</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//a <span class="token operator">|</span> //span
</span></code></pre>
<p>使用 <code>|</code> 连接两个表达式。</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="xpath-更多示例"><a aria-hidden="true" tabindex="-1" href="#xpath-更多示例"><span class="icon icon-link"></span></a>XPath 更多示例</h2><div class="wrap-body"><!--rehype:body-class=cols-2-->
</div></div><div class="h2wrap-body cols-2"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="示例"><a aria-hidden="true" tabindex="-1" href="#示例"><span class="icon icon-link"></span></a>示例</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//* <span class="token comment"># 所有元素</span>
</span><span class="code-line line-number" line="2">count<span class="token punctuation">(</span>//*<span class="token punctuation">)</span> <span class="token comment"># 计算所有元素</span>
</span><span class="code-line line-number" line="3"><span class="token punctuation">(</span>//h1<span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span>/text<span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment"># 第一个 h1 标题的文本</span>
</span><span class="code-line line-number" line="4">//li<span class="token punctuation">[</span>span<span class="token punctuation">]</span> <span class="token comment"># 找到一个 &#x3C;li> 里面有一个 &#x3C;span></span>
</span><span class="code-line line-number" line="5"> <span class="token comment"># ...扩展到 //li[child::span]</span>
</span><span class="code-line line-number" line="6">//ul/li/<span class="token punctuation">..</span> <span class="token comment"># 使用 .. 选择父级</span>
</span></code></pre>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="查找父家长"><a aria-hidden="true" tabindex="-1" href="#查找父家长"><span class="icon icon-link"></span></a>查找(父)家长</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//section<span class="token punctuation">[</span>h1<span class="token punctuation">[</span>@id<span class="token operator">=</span><span class="token string">'section-name'</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
</span></code></pre>
<p>查找直接包含 <code>h1#section-name</code><code>&#x3C;section></code></p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//section<span class="token punctuation">[</span>//h1<span class="token punctuation">[</span>@id<span class="token operator">=</span><span class="token string">'section-name'</span><span class="token punctuation">]</span><span class="token punctuation">]</span>
</span></code></pre>
<p>
查找包含 <code>h1#section-name</code><code>&#x3C;section></code>
(与上面相同,但使用后代或自我而不是孩子)
</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="最近的"><a aria-hidden="true" tabindex="-1" href="#最近的"><span class="icon icon-link"></span></a>最近的</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">./ancestor-or-self::<span class="token punctuation">[</span>@class<span class="token operator">=</span><span class="token string">"box"</span><span class="token punctuation">]</span>
</span></code></pre>
<p><code>jQuery</code><code>$().closest('.box')</code> 一样工作。</p>
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="属性"><a aria-hidden="true" tabindex="-1" href="#属性"><span class="icon icon-link"></span></a>属性</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line line-number" line="1">//item<span class="token punctuation">[</span>@price <span class="token operator">></span> <span class="token number">2</span>*@discount<span class="token punctuation">]</span>
</span></code></pre>
<p>查找 <code>&#x3C;item></code> 并检查其属性</p>
</div></div></div></div></div><div class="wrap"><div class="wrap-header h2wrap"><h2 id="另见"><a aria-hidden="true" tabindex="-1" href="#另见"><span class="icon icon-link"></span></a>另见</h2><div class="wrap-body">
<ul>
<li><a href="https://devhints.io/xpath">Devhints</a> <em>(devhints.io)</em></li>
<li><a href="http://www.whitebeam.org/library/guide/TechNotes/xpathtestbed.rhtm">Xpath test bed</a> <em>(whitebeam.org)</em></li>
</ul>
</div></div></div></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 Kenny Wang, All rights reserved.</footer></footer></body>
</html>