我正在编写一个解析器，它应该从以下 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)');
甚至通过使用下一个兄弟：
document.querySelector('div.a > :nth-child(2) + *');
但是他们都跳过它并只返回“p”元素。
我在这里看到的唯一解决方案是选择上一个节点，然后使用nextSibling它来访问它。
可以querySelector选择文本节点吗？
文本节点： https : //developer.mozilla.org/en-US/docs/Web/API/Text
正如已经回答的那样，CSS 不提供文本节点选择器，因此document.querySelector也没有。
然而，JavaScript 确实通过具有更多选择器、轴和操作符（例如文本节点）的方法提供了XPath解析器document.evaluate。
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.evaluatewhendocument.querySelectorAll也是有效的。保留它用于您确实需要通过复杂表达式解析 DOM 的情况。
| 归档时间： |
|
| 查看次数： |
4809 次 |
| 最近记录： |