Question

我正在编写一个解析器，该解析器应该从以下html中提取“提取此文本” ：

<div class="a">
    <h1>some random text</h1>
    <div class="clear"></div>
    Extract This Text
    <p></p>
    <h2></h2>
</div>

我尝试使用：

document.querySelector('div.a > :nth-child(3)');

甚至使用next sibling：

document.querySelector('div.a > :nth-child(2) + *');

但是他们都跳过它，只返回“ p”元素。

我在这里看到的唯一解决方案是选择上一个节点，然后使用nextSibling访问它。

querySelector可以完全选择文本节点吗？
文本节点： https://developer.mozilla.org/en-US/docs/Web/API/Text

Answer 1

正如已经回答的那样，CSS不提供文本节点选择器，因此document.querySelector没有提供。

但是，JavaScript确实通过方法document.evaluate提供了 XPath 解析器，该方法具有更多的选择器，轴和运算符，例如文本节点。

let result = document.evaluate(
  '//div[@class="a"]/div[@class="clear"]/following-sibling::text()[1]',
  document,
  null,
  XPathResult.STRING_TYPE
).stringValue;

console.log(result.trim());

<body>
  <div class="a">
    <h1>some random text</h1>
    <div class="clear"></div>
    Extract This Text
    <p></p>
    But Not This Text
    <h2></h2>
  </div>
</body>

//表示任意数量的祖先节点。
/html/body/div[@class="a"]会绝对寻址该节点。

应该提到的是，CSS查询的性能要比功能强大的 XPath 评估功能高得多。因此，当document.evaluate也可以工作时，请避免过度使用document.querySelectorAll。将其保留给您确实需要通过复杂表达式解析DOM的情况。

Answer 2

不能，尽管我的回答并不那么权威。（您可能已经知道了）

您可以检出此select text node with CSS或Is there a CSS selector for text nodes。

一些冗长的解释（可能没用，英语不是我的母语，对单词或语法的误用表示抱歉。）

我正在学习ParentNode，并且由于querySelectorAll()方法返回了NodeList，所以我想知道它是否可以选择文本节点。我尝试过但失败了；谷歌搜索并找到了这篇文章。

querySelectorAll(selectors)或querySelector(selectors)中的参数是一个包含一个或多个CSS selectors的DOMString（当然不包含伪元素，否则该方法将返回null）元素（不是纯文本）。

使用querySelector选择“文本”节点

2 个答案: