JavaScript 获取不包括子项的 textContent答案

【问题标题】：JavaScript get textContent excluding childrenJavaScript 获取不包括子项的 textContent
【发布时间】：2016-07-13 21:58:03
【问题描述】：

首先，我正在为 JavaScript 创建一个库，但我不能使用 jQuery。我正在尝试获取没有其子元素文本内容的 HTML 元素的文本内容。

innerText 和 textContent 这两个属性都没有给我需要的东西，请帮忙。

【问题讨论】：

标签： javascript html shared-libraries

【解决方案1】：

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);

【讨论】：

欢迎来到 StackOverflow！虽然此答案可能会为 OP 的需求提供解决方案，但请添加解释以使其更易于理解，不仅适用于 OP，而且适用于整个社区
3 更好地表示为Node.TEXT_NODE。在 DOM 中销毁这些元素有什么意义？这并没有比the accepted answer 增加解释或明显的好处。

【解决方案2】：

从以下元素中获取Author's Name，不包括<span>...：

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

使用childNodes[0]。例如：

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

结果是一个对象：

"Author's Name"

更新：答案被否决，没有评论。在生产中使用之前，请确定此方法的有效性。

【讨论】：

这只会返回第一个子节点，没有别的。所以我不知道这个答案是否被否决。（也许你错误地错过了在这里输入的确切逻辑）
这是解决方案的入口点。可以测试任何类型，甚至可以递归进行。

【解决方案3】：

您可以使用 DOM API 作为 childNodes 和 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);

我创建了上面的示例代码。

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

【讨论】：