找到带有文本的元素，然后找到 Select Element Many Levels Above it

Question

我正在制作一个删除网站部分的 chrome 扩展。 为此，我需要找到包含一些文本的<span> ，然后是包含<div>标记的 select。 通常这个标签会比 DOM 中的 span 高出许多层级，并且它与 select 没有一致的属性。

HTML

<body>
  <div> <!-- I want to select this DIV -->
    <div>
        <div>
            <div>
                <span>some text</span>
             </div>
         </div>
    </div>
  </div>
</body>

我已经使用//span[text() = 'some text'来找到正确的<span>但现在我需要将 go 备份到示例 HTML 中的第一个<div>

尝试过//*[ancestor::span[text() = 'some text']]和//span[ancestor::*[text() = 'some text']] 。 是的，这些只会 go 直到第一个父母，但这甚至对我不起作用，即使当我在XPath 测试仪上测试时它们出现为有效的 XPath 表达式。

编写可以执行此操作的 XPath 表达式的最简单方法是什么？

Answer 1

您可以尝试使用../语法上一层（即：到直接父级）并将它们链接起来，如下所示：

 const getnodes=function( expr, parent ){ let results=[]; let contextNode=parent || document; let query=document.evaluate( expr, contextNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); for ( let i=0, length=query.snapshotLength; i < length; ++i ) { results.push( query.snapshotItem( i ) ); } return results; }; let col=getnodes( '//span[ text()="some text" ]/../../../../../div', document.body ); col.forEach( n=>console.info( n.textContent ) )

 <!--This is the div I want to select --> <div>top <div>a <div>b <div>c <span>some text</span> </div> </div> </div> </div>

Answer 2

我找到的一个更好的解决方案是在 XPath 查询中使用ancestor ，因为我经常想向上遍历许多级别。

例子

//span[text() = 'some text']/ancestor::*[4]

从所选范围中选择第四个元素，无论这些元素可能是什么类型。

//span[text() = 'some text']/ancestor::a[2]

将从所选跨度向上找到第二个锚标记，前提是它是跨度的直接上级。