在本教程中,您将学习如何使用 JavaScript  元素节点的 textContent 属性来获取节点以及其子节点的文本内容。

从节点读取 textContent

要获取节点及其后代的文本内容,可以使用元素节点的 textContent 属性:

let text = node.textContent;

假设您有以下 HTML 片段:

<div id="note">
    JavaScript textContent Demo!
    <span style="display:none">Hidden Text!</span>
    <!-- my comment -->
</div>    

下面的示例使用 textContent 属性来获取 <div> 元素的文本内容:

let note = document.getElementById('note');
console.log(note.textContent);

代码是如何运行的。

  • 首先,使用 getElementById() 方法选择 id 属性值是 notediv 元素。
  • 然后,通过访问 textContent 属性来显示  div 元素节点的文本。

输出:

JavaScript textContent Demo!
Hidden Text!

从输出中可以清楚地看到,textContent 属性返回了每个子节点textContent 内容连接的结果,但不包括注释。

textContent 与 innerText

innerText 它考虑了 CSS 样式并返回友好的可读文本。例如:

let note = document.getElementById('note');
console.log(note.innerText);

输出:

JavaScript textContent Demo!

正如您所看到的,隐藏的文本和注释不会被返回。

由于 innerText 属性使用最新的 CSS 来计算文本,因此访问它会触发回流,这将会消耗大量的计算成本。当网络浏览器需要再次处理和绘制部分或全部网页时,就会发生重绘

设置节点 textContent

除了读取 textContent 之外 ,您还可以使用 textContent 属性来设置节点的文本:

node.textContent = newText;

当您在节点上设置 textContent 时,该节点的所有子节点都将被删除并替换为 newText 的值。例如:

let note = document.getElementById('note');
note.textContent = 'This is a note';

结论

使用 textContent 属性返回每个子节点的内容连接的结果。您可以使用 textContent 来设置节点的文本。innerText 返回友好的可读文本格式。