不能将DOM节点的属性用作XPath / CSS选择器查询的过滤器

Question

我正在尝试使用DOM Node的属性（例如innerText和textContent ）作为过滤器来搜索DOM元素，但没有成功。

以以下HTML为例：

<html>
  <body>
    <div class="one">
      <div class="two">
        <div class="three">
          <div>Text Here</div>
        </div>
      </div>
    </div>
  </body>
</html>

如果我使用class属性搜索节点，则可以使用XPath（评估）和CSS Selector（querySelectorAll）函数访问innerText属性：

document.evaluate("//div[@class = 'one']",
    document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
    null).singleNodeValue.innerText;

document.querySelectorAll("div.one")[0].innerText;

但是，使用innerText属性而不是class不会给我任何结果：

 document.evaluate("//div[@innerText = 'Text Here']",
     document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
     null).singleNodeValue;

 document.querySelectorAll("div[innerText='Text Here']")[0];

我用nodeName和textContent进行了测试，它也失败了，所以这就是为什么我认为它与不是标签属性的DOM属性有关。

我尝试使用XPath text()函数，但是在上例中的<div class="one">上使用它不会返回“ Text Here”。

所有测试均在Linux Mint的Google Chrome v67上进行。

为什么会这样？ 我要做什么有解决方案或解决方法？

Answer 1

innerText不是属性，因此@innerText不起作用。 另外， 'Text Here'不是<div class="one">的子文本节点，而是后代文本节点，因此//div[text()='Text Here' and @class='one']将不起作用（但是//div[.//text()='Text Here' and @class='one']应该可以）

您应该在下面尝试按文本内容查找所需的div ：

document.evaluate("(//div[.='Text Here'])[1]",
     document, null, XPathResult.FIRST_ORDERED_NODE_TYPE,
     null).singleNodeValue;

如果有更多的后代文本节点，但是您只想通过"Text Here"进行定位，则可以尝试XPath：

(//div[.//div='Text Here'])[1]

不能将DOM节点的属性用作XPath / CSS选择器查询的过滤器

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-06-25 04:48:23

不能将DOM节点的属性用作XPath / CSS选择器查询的过滤器

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-06-25 04:48:23

解决方案1
3 已采纳 2018-06-25 04:48:23