buyfakett/reference
1
0
Fork 0
mirror of https://github.com/jaywcjlove/reference.git synced 2025-06-17 20:51:21 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
3d6a8786bd360b2d4ed5b31c4dfde622bc7b7fd2
reference/docs/xpath.html
jaywcjlove 3d6a8786bd feat: add xpath.md cheatsheet. d39380a07f
2022-09-30 01:43:43 +00:00

566 lines
35 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="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=".5" 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="white"></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="#cbd5e1"></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="#292D32"></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><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>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>XPath 选择器</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>入门</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>后代选择器</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>有序选择器</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>属性选择器</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>兄弟姐妹选择器</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>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>杂项选择器</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>XPath 表达式</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>步骤和轴</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>前缀</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>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>XPath Predicates(谓词)</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3>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>操作符</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>使用节点</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>索引</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>链接顺序</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>嵌套谓词</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>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>节点功能</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>字符串函数</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>布尔函数</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>类型转换</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>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>使用轴</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>子轴</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>后代或自我轴</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>其他轴</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>联合</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>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>示例</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>查找(父)家长</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>最近的</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>属性</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>另见</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>
Reference in New Issue View Git Blame Copy Permalink