没有一个孩子选择元素(Select element without a child)

我有一个网页，可能下列之一：

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

要么

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

我想抢到这两种情况下的数值“33”，是有一个CSS选择器可以使用吗？ 我试图使用下文中，否b兄弟或b这是一个#size同级#size：

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

不过，我不断收到错误 - “错误：SYNTAX_ERR：DOM异常12”

据W3规格只有简单的选择器的支持，事情是，“大于号”（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);

Answer 2:

所以真的想要显著文本（因为在你的第二个例子即，除空白，有可能是标签和回报之间的span开始标签和b ）的#size ，或者，如果不存在，它的第一个的显著文本元件：

// 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 4级选择和家长选择，你就可以使用一个简单的选择，但现在你不能直接这样做。

你可以遍历查找第一个文本节点，但这里有一个哈克的解决方案：

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

如果你有你的内容的一些想法只能用于#size元素。

文章来源: Select element without a child