gpt4 book ai didi

selectors-api - 使用querySelector选择 "Text"节点

转载 作者:行者123 更新时间:2023-12-03 09:28:40 31 4
gpt4 key购买 nike

我正在编写一个解析器,该解析器应从以下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

最佳答案

正如已经回答的那样,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的情况。

关于selectors-api - 使用querySelector选择 "Text"节点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54809603/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com