JavaScript 获取不包括子项的 textContent

Question

First, I'm creating a library for JavaScript and I can not use jQuery. I'm trying to get the text content of an HTML element without the text contents of its children.

Both attributes innerText and textContent don't give me what needed, please help.

Answer 1

You can solve using DOM API as childNodes and nodeType.

var elChildNode = document.querySelector("#hello").childNodes;
var sChildTextSum = "";

elChildNode.forEach(function(value){
    if(value.nodeType === Node.TEXT_NODE) { 
        console.log("Current textNode value is : ", value.nodeValue.trim());
        sChildTextSum += value.nodeValue;
    }
}); 

console.log("All text value of firstChild : ", sChildTextSum);

I created a sample code as above.

https://jsfiddle.net/nigayo/p7t9bdc3/

Answer 2

To get Author's Name from the following element, excluding <span>... :

<div class="details__instructor">
    Author's Name<span ng-show="job_title">, Entrepreneur</span>
</div>

use childNodes[0] . For example:

document.querySelector('div.details__instructor').childNodes[0].textContent

Answer 3

Using only JavaScript (you specified you cannot use jQuery), and given that you have provided and know the id for the parent element:

document.getElementById('parent_element_id').childNodes[0].nodeValue;

You can also use .trim() to remove any trailing space characters left behind from the removal of any child element text:

document.getElementById('parent_element_id').childNodes[0].nodeValue.trim();

Answer 4

var mydiv = getElementByID("id");
function Get_text(element) {
    var selected = element.cloneNode(true);
    var text;
    while (selected.firstChild) {
      if (selected.firstChild.nodeType == 3) text = selected.firstChild.nodeValue;
      selected.removeChild(selected.firstChild);
    }
    return text;
  }
Get_text(mydiv);

Answer 5

I know many good solutions here exist, but none of them actually achieved what I needed (get the textContent of a single node, none of its children), so sharing this for future searchers.

var html = document.getElementsByTagName("*");

for (var i = 0; i < html.length; i++) {
    var el = html[i];
    for (var j = 0; j < el.children.length; j++) {
        var child = el.children[j],
            childTextContent = child.innerHTML;
        // Remove all children tags, leaving only the actual text of the node.
        childTextContent = childTextContent.replace(/\<.*\>.*\<\/.*\>/gmi, "");
        console.log(childTextContent);
        // Now you can do any type of text matching (regex) on the result.
    }
});