CSS / XPATH 選擇器查詢

Question

對我們的 CSS 和 Xpath 選擇器世界的一個小問題我已經成功地使用 XPATH 獲得了一個文本值，但我無法使用 CSS 選擇器成功，

這是我的例子：

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

我可以獲得值“270,38K”而沒有 XPATH 問題，

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();

資源 -> 歐元 (€) ！ 270,38K（錯誤）

您是否有線索只能使用 css 選擇器獲取 span 的文本值（沒有子內容）？

謝謝你們 ！

Answer 1

您的選擇器很好，您只需要通過獲取包含所需文本的文本節點來做一些額外的工作，因為 css 選擇器無法獲得這些文本

使用 lastNode 獲取元素的最后一個子節點（應該是文本節點）並獲取該元素的 textContent

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

或使用childNodes列表

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