Question

来自这篇HTML：

<form action="/signup" class="signup" method="post">
    <div class="field">
        <input type="text" class="text-input" autocomplete="off" name="user[name]" maxlength="20" placeholder="Nom complet">
    </div>
    <div class="field">
        <input type="text" class="text-input email-input" autocomplete="off" name="user[email]" placeholder="Email">
    </div>
    <div class="field">
        <input type="password" class="text-input" name="user[user_password]" placeholder="Mot de passe">
    </div>
    <button type="submit" class="btn signup-btn">
        S'inscrire
    </button>
</form>

XPath表达式是否可以返回每个输入元素的所有右上角，左上角，下方和上方？

Answer 1

如果你的意思是在文档树中的位置，右边是右边的兄弟（轴following-sibling），左边是兄弟（轴preceding-sibling），上面是父（轴） parent），下面是孩子（或更多孩子;轴child）。

轴的使用方法如下：

//button/preceding-sibling::*[last()]

这将返回文档中所有按钮的左侧兄弟。

两个斜杠（//）是/descendant-or-self::node()的快捷方式，它使用轴descendant-or-self并选择当前节点的所有子节点。开头，文档是当前节点，因此//选择文档中的所有节点。因此//button（/descendant-or-self::node()/button）选择文档中的任何按钮。步骤preceding-sibling::*选择每个按钮的所有前面的兄弟节点。 [last()]部分解释如下;它只选择每个按钮的最后一个兄弟。

您可以通过附加[1]将[last()]附加到XPath和最后一项来从集合中获取第一项。这些是[position() = 1]和[position() = last()]的快捷方式。

请注意，没有给出轴时会隐含child::。 //form/button与//form/child::button相同。此外，parent::*还有一个直观的快捷方式，即..。

Answer 2

Palec感谢您的解释

为清楚起见，我建议将Yahoo Finance网站与此页http://finance.yahoo.com/q?s=EURUSD=X

一起使用

右侧 是正确的兄弟（轴跟随兄弟）

对于文本“EUR / USD（EURUSD = X）”to-right-of =“CCY”

Xpath表达式：.//h2 [text()="EUR/USD(EURUSD = X）“] / follow-sibling :: * [1]

左侧 是兄弟姐妹（兄弟之前的轴）

对于文本“CCY”左侧=“欧元/美元（EURUSD = X）”

Xpath表达式：.// span [text()="CCY“] / preceding-sibling :: * [1]

上方 是父级（轴父级）

对于文本“1.3588”以上=“EUR / USD（EURUSD = X）”

Xpath Expression：.// span [text()="1.3588"]/parent::* [1] =＆gt; 结果不佳

以下 是儿童（轴子）

对于文本“EUR / USD（EURUSD = X）”低于=“1.3588”

Xpath表达式：.//h2 [text()="EUR/USD(EURUSD = X）“] / child :: * [1] =＆gt; 无结果

jsfiddle Test

var it = document.evaluate('//h2[text()="EUR/USD (EURUSD=X)"]/following-sibling::*[1]', document);

while (node = it.iterateNext()) { console.log(node); }

使用XPath选择输入节点的右侧，左侧，上方和下方

2 个答案: