CSS / XPATH 选择器查询

Posted 2023-03-06

【中文标题】CSS / XPATH 选择器查询

【英文标题】：CSS / XPATH Selector Query

【发布时间】：2020-05-12 10:09:50

【问题描述】：

对我们的 CSS 和 Xpath 选择器世界的一个小问题 我已经使用 XPATH 成功获取了文本值，但使用 CSS 选择器无法成功，

这是我的例子：

<span class="piggy">
    <i class="fa fa-try"></i>
    <strong>euros (€) !</strong>
270,38K</span>

我可以使用 XPATH 毫无问题地获得值“270,38K”，

document.evaluate('//*[@id="wrap"]/span/text()', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.textContent.trim();

分辨率 -> 270,38K（好）

但我无法使用 CSS 选择器来实现它，

document.querySelector('span.piggy').innerText.trim();

Res -> 欧元 (€) ！ 270,38K（错误）

您是否知道使用 css 选择器仅获取 span 的文本值（没有子内容）？

谢谢大家！

【问题讨论】：

好一个我也会想知道的。顺便说一句，你在 Firefox 中也试过这个吗？

【参考方案1】：

您的选择器很好，您只需要通过获取包含所需文本的文本节点来做一些额外的工作，因为那些无法通过 css 选择器获得

使用lastNode获取元素的last child node（应该是一个文本节点）并获取该元素的textContent

document.querySelector('span.piggy').lastNode.textContent

或使用childNodes 列表

let nodes = document.querySelector('span.piggy').childNodes;
console.log( nodes[nodes.length-1].textContent );