选择没有子元素的元素 [英] Select element without a child

问题描述

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

I have a page that might one of the following:

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

或

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

我想在这两种情况下获取值'33'，是否有一个CSS选择器使用？
我试图使用以下，#size没有b同级或b是#size兄弟：

I would like to grab the value '33' on both cases, is there a CSS selector I can use? I tried to use the following, #size with no b sibling or b which is a #size sibling:

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

但我不断收到错误 - 错误：SYNTAX_ERR：DOM异常12

But I keep getting an error- "Error: SYNTAX_ERR: DOM Exception 12"

根据 w3规范 简单选择器< a>被支持，事情是大于号（U + 003E，>）被认为是简单选择器定义。

推荐答案

CSS选择器，但你可以在几行JS：

You can't do it with a regular CSS selector, but you can do it in a few lines of JS:

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

console.log(text);

这篇关于选择没有子元素的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！