选择没有子元素的元素

Question

我的页面可能是以下之一：

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

或者

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

我想在这两种情况下都获取值“33”，有没有我可以使用的 CSS 选择器？ 我尝试使用以下，没有 b 兄弟的 #size 或 #size 兄弟的 b：

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

但我不断收到错误消息-“错误：SYNTAX_ERR:DOM Exception 12”

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

Answer 1

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

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

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

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

Answer 2

所以你真的想要重要的文本（即除了空格，因为在你的第二个例子中，#size 的span 开始标记和b 之间可能有制表符和返回），或者，如果不是这样存在，其第一个元素的重要文本：

// Is text just whitespace?
function isWhitespace(text){
    return text.replace(/\s+/,'').length === 0;
}

// Get the immediate text (ie not that of children) of element
function getImmediateText(element){
    var text = '';

    // Text and elements are all DOM nodes. We can grab the lot of immediate descendants and cycle through them.
    for(var i = 0, l = element.childNodes.length, node; i < l, node = element.childNodes[i]; ++i){
    // nodeType 3 is text
        if(node.nodeType === 3){
            text += node.nodeValue;
        }
    }

    return text;
}

function getFirstTextNode(element){
    var text = getImmediateText(element);

    // If the text is empty, and there are children, try to get the first child's text (recursively)
    if(isWhitespace(text) && element.children.length){
        return getFirstTextNode(element.children[0])
    }
    // ...But if we've got no children at all, then we'll just return whatever we have.
    else {
        return text;
    }
}

Answer 3

你不能用常规的 CSS 选择器来做，但是你可以用几行 JS 来做：

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

console.log(text);