Вопрос по css, css-selectors – Выберите элемент без ребенка

8

У меня есть страница, которая может быть одним из следующих:

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

Или же

<span id="size">
    33
    32
</span>

Я хотел бы получить значение "33' в обоих случаях есть ли CSS-селектор, который я могу использовать? Я попытался использовать следующее, #size без брата b или b, который является братом #size:

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

Но я продолжаю получать ошибку ...Ошибка: SYNTAX_ERR: DOM Exception 12 "

В соответствии сW3 Spec толькоПростые селекторы поддерживаются, дело в том, чтознак "больше, чем" (U + 003E,>) " считается частьюПростые селекторы определение.

document.querySelector (»#size>b, #size ') &  document.querySelector (»#size, #size> b ') оба возвращают <SPAN> элемент во втором случае, как получилось? Guy Korland
Можете ли вы использовать JQuery? Marcus Vinicius
@BoltClock: Теперь, когда вы спрашиваете, нет ни одного. Я'Я не уверен, о чем я думал. Blender
@Blender Это также выберет весь элемент span второго примера, который (I 'я догадываюсь) не то, что хочет ОП. Не уверен, хотя. Jeroen

Ваш Ответ

3   ответа
0

когда мыбудет иметь селекторы уровня 4 CSS и родительский селектор выВы сможете использовать простой селектор, но сейчас вы можетесделать это напрямую.

Вы можете выполнить итерацию, чтобы найти первый текстовый узел, но здесьхакерское решение:

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

Для использования, только если у вас есть представление о содержании вашего#size элемент.

1) Этоне родительский селектор 2) Селектор темы победилздесь не поможет, так чтос уровнем 4 тоже не выполнимо. BoltClock
победил'т это вернуть "б>33" на втором случае? Guy Korland
@GuyKorland You 'верно. Исправлена. Denys Séguret
11

сделать это с помощью обычного селектора CSS, но вы можете сделать это в несколько строк JS:

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

console.log(text);
@GuyKorland::not() ожидает набор элементов, которые#size не должен»быть частью.> b ISN»t действительный селектор сам по себе, поэтому вы получаете свою ошибку. Blender
Смотрите мое последнее редактирование относительно спецификации, если яЯ не ошибаюсь, спецификация говорит, что это должно работать. Guy Korland
0

кроме пробелов, потому что во втором примереВозможно, вкладки и возвраты между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;
    }
}
Я исправил вопрос и удалил пробелы из первого примера Guy Korland

Похожие вопросы