CSS / XPATH Селекторный запрос

Question

Небольшой вопрос к нашему миру о CSS & Xpath Selector. Я успешно получил текстовое значение с помощью XPATH, но не могу преуспеть с помощью CSS Selector,

Вот мой пример:

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

Res -> 270,38K ( хорошо )

Но я не могу добиться этого с помощью селектора CSS,

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

Res -> евро (€)! 270,38K ( неправильно )

У вас есть подсказка, чтобы получать только текстовое значение диапазона (без дочернего содержимого) с помощью селектора css?

Спасибо все!

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