查找带有文本的元素，然后在其上方的许多级别中选择元素答案

【问题标题】：Find Element with Text, then Select Element Many Levels Above it查找带有文本的元素，然后在其上方的许多级别中选择元素
【发布时间】：2021-10-05 00:14:54
【问题描述】：

我正在制作一个删除网站部分的 chrome 扩展程序。为此，我需要找到一个包含一些文本的<span>，然后选择包含<div> 的标签。通常这个标签会在 DOM 中的 span 之上很多层，并且它没有一致的属性可供选择。

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>，但现在我需要回到示例HTML 中的第一个<div>

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

编写可以做到这一点的 XPath 表达式的最简单方法是什么？

【问题讨论】：

标签： html dom xpath google-chrome-extension

【解决方案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>

【讨论】：

【解决方案2】：

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

例子

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

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

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

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

【讨论】：