JavaScript 获取不包含子项的 textContent

Question

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

属性 innerText 和 textContent 都没有提供我需要的东西，请帮忙。

Answer 1

您可以使用 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/

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].textContent

Answer 3

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 4

仅使用 JavaScript（您指定不能使用 jQuery），假设您已经提供并知道父元素的 id：

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

您还可以使用 .trim() 删除任何尾随 space 字符，这些字符在删除任何子元素文本时留下：

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

JavaScript 获取不包含子项的 textContent

JavaScript get textContent excluding children

html

javascript

shared-libraries