Choose an item that does not have any offspring

Question

Choose an item that does not have any offspring

I am facing an issue with a webpage that contains either of the following:

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

Or

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

I need to extract the value '33' in both scenarios. Is there a CSS selector that can achieve this? I attempted to use the following code for selecting #size without a sibling b or a b that is a sibling of #size:

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

However, I keep encountering an error- "Error: SYNTAX_ERR: DOM Exception 12"

As per the w3 Spec, only Simple Selectors are supported. The problem lies in the fact that the "greater-than sign" (U+003E, >) is considered part of the definition of Simple Selectors.

css css-selectors

Answer 1

Answer №1

It's not possible using a standard CSS selector, but you can achieve it with some simple JavaScript:

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

console.log(text);

Answer 2

It's not possible using a standard CSS selector, but you can achieve it with some simple JavaScript:

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

console.log(text);

Answer 3

Answer №2

If you are looking for meaningful content in the #size element, excluding whitespace (as there may be tabs and returns between tags), or if it's not present, then retrieve the significant text of its first child:

// Determining if text consists only of whitespace
function isWhitespace(text){
    return text.replace(/\s+/,'').length === 0;
}

// Retrieving immediate text content of an element without including its children's text
function getImmediateText(element){
    var text = '';

    // All nodes within an element can be accessed as descendants to cycle through.
    for(var i = 0; i < element.childNodes.length; i++){
        var node = element.childNodes[i];
        // Text nodes have nodeType 3
        if(node.nodeType === 3){
            text += node.nodeValue;
        }
    }

    return text;
}

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

    // If the text contains only whitespace and has children, recursively retrieve the first child's text
    if(isWhitespace(text) && element.children.length > 0){
        return getFirstTextNode(element.children[0]);
    }
    // Otherwise, return the current text content 
    else {
        return text;
    }
}

Answer 4

If you are looking for meaningful content in the #size element, excluding whitespace (as there may be tabs and returns between tags), or if it's not present, then retrieve the significant text of its first child:

// Determining if text consists only of whitespace
function isWhitespace(text){
    return text.replace(/\s+/,'').length === 0;
}

// Retrieving immediate text content of an element without including its children's text
function getImmediateText(element){
    var text = '';

    // All nodes within an element can be accessed as descendants to cycle through.
    for(var i = 0; i < element.childNodes.length; i++){
        var node = element.childNodes[i];
        // Text nodes have nodeType 3
        if(node.nodeType === 3){
            text += node.nodeValue;
        }
    }

    return text;
}

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

    // If the text contains only whitespace and has children, recursively retrieve the first child's text
    if(isWhitespace(text) && element.children.length > 0){
        return getFirstTextNode(element.children[0]);
    }
    // Otherwise, return the current text content 
    else {
        return text;
    }
}

Answer 5

Answer №3

Once we have CSS Level 4 selectors and the parent selector, using a simple selector will be possible. However, at the moment, this cannot be done directly.

If you want to find the first text node, one workaround is:

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

This method should only be used if you are familiar with the content of your #size element.

Answer 6

Once we have CSS Level 4 selectors and the parent selector, using a simple selector will be possible. However, at the moment, this cannot be done directly.

If you want to find the first text node, one workaround is:

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

This method should only be used if you are familiar with the content of your #size element.

Choose an item that does not have any offspring

Answer №1

Answer №2

Answer №3

Similar questions

Unpredictable hue of text

Having trouble setting the backgroundImage in React?

Deletion of an element with Reactjs upon clicking

Changing the CSS Border of Thumbnails

What is the best way to smoothly switch from one Font Awesome icon to another?

What are the steps to implement a personalized canvas in ThreeJS?

What is the specific use of the second app.css file in Laravel?

Creating a custom backdrop for your kaboom.js webpage

Unusual Blank Space Found Beneath a Displayed Block Item

Creating uniform table column widths within a flex container with dynamic sizing

What steps can be taken to create a curved bottom for the header section?

Adjust the background color of a non-selected Material-UI checkbox

What could be causing WebKit to fail in accurately redrawing this text?

Using C# and Selenium to locate and click on an input element based on the text found in

Changing text on a button with JavaScript toggle functionality: A step-by-step guide

Attach the button to the input tag so that they are always connected

Enhance User Experience by Implementing Event Listeners for Changing Link Visibility Using mouseover and getElementsBy

Run various CSS animations repeatedly

Tips on eliminating the header section in SlickGrid?

Dynamic gallery with customizable features (HTML/CSS)