JavaScript获取textContent不包括子元素

Question

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

innerText和textContent属性都不能给我所需的内容，请帮忙。

- Dee

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/

- superui

---

请不要使用匈牙利命名法。 - palapapa

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

- Roman Mishin

---

这只会返回第一个子节点，没有其他的。所以我不知道是否会被投票否决，也许你在输入这里时错过了确切的逻辑。 - Tharaka Deshan

这是解决方案的入口点。可以测试任何类型，甚至可以递归地进行测试。 - Roman Mishin

这不会返回文本值！应该被投票否决，以便更多的人不会感到困惑。 - Emeka Orji

Answer 3

只使用 JavaScript（您指定不能使用 jQuery），并且已经提供并知道父元素的 id，可以实现以下操作：

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

您也可以使用.trim()来删除任何子元素文本删除后留下的尾随空格字符：

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

- jimjamz

---

这段内容应该在页面顶部。这是最合乎逻辑和直接的答案。请点赞以便更多人可以快速访问正确答案。 - Emeka Orji

Answer 4

我知道这里有很多好的解决方案，但是它们都没有实现我需要的功能（获取一个节点的textContent，而不包括它的任何子节点），因此我分享这个方法给未来的搜索者。

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, "");
        // Also remove <img /> type tags.
        childTextContent = childTextContent.replace(/\<.*\ \/\>/gmi, "");
        console.log(childTextContent);
        // Now you can do any type of text matching (regex) on the result.
    }
});

- deviavir

Answer 5

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

- JHON ZEKE

---

欢迎来到StackOverflow！虽然这个答案可能解决了OP的需求，但请添加一些解释以便于让它更容易理解，不仅为了OP，也是为了整个社区。 - xKobalt

3最好表达为“Node.TEXT_NODE”。销毁DOM中的这些元素有什么意义？这与被接受的答案相比，没有增加解释或明显的好处。 - ggorlen