如何从 JS 中的 HTML 标签元素中仅获取文本节点（而不是嵌套标签）的内容？

Question

假设我有

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

是否有 JavaScript function/property return “bob”？

我尝试了 document.getElementById('mydiv').textContent，但它给出了“foobarbob”，innerText 也是如此。我可以通过剥离任何标签及其内容来解析 innerHTML 的 return，但我猜有更好的方法吗？

谢谢

Answer 1

您有两个选择：

bob 在 div 中的 Text 节点中。你不能 select 一个 Text node directly, but you can access it via the childNodes 在它的父级上（或者 nextSibling 在它前面的 span 上，等等）：

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>

请注意您如何看到多个日志行，而不仅仅是 bob 的一个，并且 bob 周围有空格。在你的div中，有三个Text个节点：

在 div 的开头和第一个 span 之间有空格的那个。
两个 span 之间有空格的那个。
第二个 span 末尾和 div 末尾之间的所有文本（包括空格）的最后一个。

因此，正如 Felix Kling 在评论 （现已删除） 中指出的那样，如果您不想要该空格，则可能需要 trim 将其关闭（ nodeValue.trim()) and/or 忽略其中只有空格的节点。

您还可以在 div 上使用 textContent 属性，这将为您提供其所有子项和的文本后代 Text 个节点（因此包括 foo 和 bar，而不仅仅是 bob）：

const div = document.getElementById("mydiv");
console.log("`textContent`:", div.textContent);

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

如何从 JS 中的 HTML 标签元素中仅获取文本节点（而不是嵌套标签）的内容？

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

javascript

textnode