JavaScript textContent 读取设置元素文本内容

在本教程中，您将学习如何使用 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 属性值是 note 的 div 元素。
• 然后，通过访问 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 返回友好的可读文本格式。