How to Get the Text Node of an Element

How to get the text node of an element?

var text = $(".title").contents().filter(function() {
  return this.nodeType == Node.TEXT_NODE;
}).text();

This gets the contents of the selected element, and applies a filter function to it. The filter function returns only text nodes (i.e. those nodes with nodeType == Node.TEXT_NODE).

How to get text node after element?

Try using the DOM function .nextSibling to pick the next node (including the text nodes) and use nodeValue to get the text All the world

$(':checkbox')[0].nextSibling.nodeValue

Get text node value in DOM

The text content behaves as a childNode in this case. It may be that a line break or other character is causing this to happen. (See here, for example)

Either way you can access the content as follows:

xmlDoc.getElementsByTagName("title")[0].innerHTML

How to select all text nodes after specific element

You can get the content and use split with hr to get the html after the hr and then replace this content within a div and you will be able to manipulate this div to get your content:

var content = document.querySelector('.someclass').innerHTML;content = content.split('<hr>');content = content[1];
document.querySelector('.hide').innerHTML = content;/**/
var nodes = document.querySelector('.hide').childNodes;for (var i = 0; i < nodes.length; i++) {  console.log(nodes[i].textContent);}

.hide {  display: none;}

<div class="someclass">  <h3>First</h3>  <strong>Second</strong>  <hr> Third  <br> Fourth  <br>  <em></em> ...</div><div class="hide"></div>

How can I get only the content of text nodes (not nested tags) from an HTML tag element in JS?

You have a couple of options:

bob is in a Text node in the div. You can't select a Text node directly, but you can access it via the childNodes on its parent (or nextSibling on the span in front of it, etc.):

const div = document.getElementById("mydiv");
console.log("`nodeValue` of each text node in the div:");
for (const child of div.childNodes) {
    if (child.nodeType === Node.TEXT_NODE) {
        console.log(child.nodeValue);
    }
}

<div id="mydiv">
     <span>foo</span>
     <span>bar</span>
     bob
</div>

HTML Javascript get textNode by id tagname anything?

Text doesn't have a property for id, so when you write the node into the DOM, it's not accessible that way any more. What you create in the JavaScript (a Text object) does not directly correlate to a DOM element like HTMLElement.

In fact, it's not even considered a child of the parent, it's the textContent of the parent. Note that textContent comes from an element inheriting from a Node.

You can assign an "id" to the object when you create it because all objects are just objects, but when you put it into the DOM, all non-standard stuff disappears.

If you test your parent element for it's children:

myDiv.children.length;

You'll see that (if there are no other children) the text node you've added is "absorbed" into the parent as a property.

Here's a little jsfiddle demonstrating.

---

Side note: this is an over-simplification of how text is handled in the browser. I don't know if I'd call it a gross over-simplification, but it is one either way.

It should be noted that Text inherits from CharacterData which in turn inherits from Node. However, these are interfaces, which limit the scope of available methods / properties.

Additionally, Text nodes are always accessible in the DOM, but not via identifiers or tags. The MDN page for Node.normalize clearly demonstrates how these nodes are available via the childNodes read-only nodeList.

While it is useful to keep this stuff in your back pocket, it's probably not important to think about Text in the context of Nodes and normalization and CharacterData for day to day use.

Get DOM text node from point?

Here is an implementation that works in all current browsers:
https://github.com/nuxodin/q1/blob/master/q1.dom.js

document.betaNodeFromPoint = function(x, y){
    var el = document.elementFromPoint(x, y);
    var nodes = el.childNodes;
    for ( var i = 0, n; n = nodes[i++];) {
        if (n.nodeType === 3) {
            var r = document.createRange();
            r.selectNode(n);
            var rects = r.getClientRects();
            for ( var j = 0, rect; rect = rects[j++];) {
                if (x > rect.left && x < rect.right && y > rect.top && y < rect.bottom) {
                    return n;
                }
            }
        }
    }
    return el;
};

How to get next text node with cheerio

The various jQuery-ish methods of Cheerio focus on Element nodes, but you're looking for the content of Text nodes.

The easiest way given the HTML you've shown is to use the underlying DOM(like) element's nextSibling to access its next sibling (which will be the Text node) and get the text from that via nodeValue:

const address = $("i.icon-home")[0].nextSibling.nodeValue;
const website = $("i.icon-website")[0].nextSibling.nodeValue;
const phoneNumber = $("i.icon-tel")[0].nextSibling.nodeValue;

([0] accesses the first matching DOM(ish) element inside the Cheerio collection.)

A couple of notes on that:

1. You may want to trim whitespace off (by calling trim()), as the whitespace at the beginning and end of the Text nodes is preserved.

2. If you're unsure whether there will be a Text node (or indeed any node) following the image, you might want to be more defensive:

const getNextText = (element) => {
    if (!element.nodeName) { // If it's a Cheerio object...
        element = element[0];
    }
    const next = element.nextSibling;
    return next?.nodeType === 3 ? next.nodeValue.trim() : "";
};

Then

const address = getNextText($("i.icon-home"));
const website = getNextText($("i.icon-website"));
const phoneNumber = getNextText($("i.icon-tel"));

---

Related Topics