选择没有孩子的元素

Question

我有一个页面可能是以下之一:

<span id='size'>33</span>

要么

<span id='size'>
    <b>33</b>
    <strike>32</strike>
</span>

我想在两种情况下都获取值'33',我可以使用CSS选择器吗？我尝试使用以下内容,#size with no b sibling或b是#size sibling:

document.querySelector('#size:not(>b), #size>b').innerText

但我一直收到错误 - "错误:SYNTAX_ERR:DOM例外12"

根据w3 Spec,仅支持简单选择器,事实是"大于号"(U + 003E,>)"被视为简单选择器定义的一部分.

Answer 1

你不能用常规的CSS选择器来做,但是你可以在几行JS中做到这一点:

var element = document.querySelector('#size');
var b = element.querySelector('b');
var text = b ? b.innerText : element.childNodes[0].nodeValue;

console.log(text);