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 Exception 12”

根据w3 Spec仅支持Simple Selectors，事实是“大于号”（U + 003E，＆gt;）“被视为Simple Selectors定义的一部分。

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

Answer 2

我们将拥有CSS Level 4选择器和父选择器的那一天你将能够使用一个简单的选择器，但现在你不能直接使用它。

您可以迭代查找第一个文本节点，但这是一个hacky解决方案：

var text = document.getElementById('size').innerHTML.split(/<.*?>/)[0];

仅在您对#size元素的内容有所了解时才能使用。

Answer 3

所以你真的想要重要的文本（即除了空白之外，因为在你的第二个例子中，span的{{1}}开始标记和b之间可能有标签和回报），或者，如果不存在，则第一个元素的重要文本：

#size

选择没有孩子的元素

3 个答案: