CSS Element Child VS Child with Text Node

Isn't text node a child when using children function?

Isn't text node a child when using children function?

Yes. Text nodes are nodes and can be child nodes of an element.

doesn't print text element

There's no such thing as a text element (at least in HTML, SVG has one). Element nodes and text nodes are different kinds of nodes.

You're reading too much into the name of the property.

See the MDN documentation:

children is a read-only property that returns a live HTMLCollection which contains all of the child elements

or the specification:

The children attribute’s getter must return an HTMLCollection collection rooted at this matching only element children.

If you want to get all the nodes, including the text nodes, then use childNodes. DOM doesn't need two properties that do the same thing and it is often useful to get just the elements (especially if the only text nodes contain only white space).

Check if child is last - also include text nodes

Place the Text node in a element

.icon:last-child {  color: red;}

<a href="" class="button">    <i class="icon">Not last child</i>    <span>Button</span></a><br /><a href="" class="button">    <span>Button</span>    <i class="icon">Last child</i></a>

Using childnodes to change text

Let's examine those childNodes more closely.

const childNodes = document.querySelector('#parent').childNodes

console.log('Total', childNodes.length)
console.log([...childNodes]
  .map(({ nodeType, textContent, nodeValue }) => ({ nodeType, textContent, nodeValue })))

<ul id="parent">
    <li class="list">Rood</li>
    <li class="list">Groen</li>
    <li class="list">Blauw</li>
</ul>

Is there a CSS selector for text nodes?

Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.

Target elements with single child AND no text nodes outside that child, using jQuery

Working fiddle

$('p').filter(function() {
  return ( 1 === $(this).find('*').length && 1 === $(this).find('a').length && $(this).text() === $(this).find('a').text() );
});

Edit: I didnt know about the :only-child selector in the first place. With it, even cleaner:

$('p').has('a:only-child').filter(function() {
    return $(this).find('a').text() === $(this).text();                  
});

How to get elements that have at least one direct child text node

jsfiddle with NodeIterator

MDN Reference

$(function () {
var textNodeIterator = document.createNodeIterator(
document.body,
NodeFilter.SHOW_TEXT,

function (node) {
    if (is_ignorable(node)) return NodeFilter.FILTER_REJECT;
    return NodeFilter.FILTER_ACCEPT;
});
var matchingElements = [];
var currentNode;

while (currentNode = textNodeIterator.nextNode()) {
    //console.log(currentNode);
    if (currentNode) {
        //console.log(currentNode.nodeType + "-" + currentNode.textContent);
        if (!isParentAlreadyMatched(currentNode.parentNode)) matchingElements.push(currentNode.parentNode);
    }
}
console.log(matchingElements);

function is_all_ws(nod) {
    // Use ECMA-262 Edition 3 String and RegExp features
    return !(/[^\t\n\r ]/.test(nod.textContent));
}

function is_ignorable(nod) {
    return (nod.nodeType == 8) || // A comment node
    ((nod.nodeType == 3) && is_all_ws(nod)); // a text node, all ws
}

function isParentAlreadyMatched(parentNode) {
    for (var i = 0; i < matchingElements.length; i++) {
        if (matchingElements[i] === parentNode) return true;
    }
    return false;
}
});

---

Related Topics