主页 / 问题 / 1027804
Accepted
Serhii
Asked:2020-09-25 15:11:13 +0000 UTC2020-09-25 15:11:13 +0000 UTC

XPath - 选择特定元素前后的数据范围

  • 772
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h2>H2</h2>
<p>P</p>
<div><code>Python code</code></div>
<div><code>JS code</code></div>
<p>Example</p>

</body>
</html>

这是HTML代码。
我想编写一个 XPath 来获取标签中的所有数据code，即 我需要一个包含元素<code>Python code</code>和的列表<code>JS code</code>。

问题是我们需要一个 XPath 来收集所有code嵌套在 div 中的标签p，位于text()='Example'.

我正在玩，following-sibling但preceding-sibling我找不到合适的 kspa。
谢谢你。

xpath

2 个回答

  1. Best Answer

    我们正在寻找code，它嵌套在div，相对于第一个不包含子节点的下一个节点code与p文本Example：

    //code[ancestor::div/following-sibling::*[not(.//code)][1][self::p][text()='Example']]

    const xpath = "//code[ancestor::div/following-sibling::*[not(.//code)][1][self::p][text()='Example']]";

function getElementByXpath(xpathToExecute){
  var result = [];
  var nodesSnapshot = document.evaluate(xpathToExecute, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
  for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ ){
    result.push( nodesSnapshot.snapshotItem(i) );
  }
  return result;
}

console.log( getElementByXpath(xpath) );
    <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Title</title>
  </head>
  <body>

    <code>dont touch me 1</code>
    <h2>H2</h2>
    <p>P</p>
    <div>
      <code>dont touch me 2</code>
    </div>
    <div>
      <code>dont touch me 3</code>
    </div>
    <code>dont touch me 4</code>
    <p>Example</p>
    <code>dont touch me 5</code>
    <div>
      <code>dont touch me 6</code>
    </div>
    <div>
      <code>dont touch me 7</code>
    </div>
    <p>Invalid Example</p>
    <div>
      <code>Python code</code>
    </div>
    <div>
      <code>JS code</code>
    </div> 
    <p>Example</p>
  </body>
</html>

    • 1

  2. 我们寻找 div 后面紧跟一个带有文本 Example 的段落，并获取子代码

    //div[following-sibling::p[1][text()='Example']]/code
    • 1

相关问题