使用 querySelector 选择“文本”节点答案

【问题标题】：Select "Text" node using querySelector使用 querySelector 选择“文本”节点
【发布时间】：2019-02-21 14:38:04
【问题描述】：

我正在编写一个解析器，它应该从以下 html 中提取 "Extract This Text"：

<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

【问题讨论】：

我的解决方法是使用querySelector 选择元素，然后使用Array.from(element.childNodes).find(node => node.nodeName === '#text') 提取#text 节点
在这种情况下，Text 节点是第三个 ChildNode，因此您可以通过以下方式访问其文本：element.childNodes[2].textContent

标签： selectors-api

【解决方案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.querySelectorAll 也可以正常工作时，请避免过度使用document.evaluate。为确实需要通过复杂表达式解析 DOM 的情况保留它。

【讨论】：

太棒了！这正是我应该从一开始就使用的。谢谢！ MDN docs for Document.evaluate()
@icl7126 谢谢！我添加了性能通知。您应该根据具体情况决定使用哪种方法。
这会比递归到整个 DOM 结构以查找其中包含的所有 Text 节点更高效吗？

【解决方案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）仅适用于元素（不是纯文本)。

【讨论】：