JavaScript textContent

概要：在本教程中，您将学习如何使用 JavaScript textContent 属性来获取节点及其后代的文本内容。

从节点读取 textContent

要获取节点及其后代的文本内容，请使用 textContent 属性

let text = node.textContent;Code language: JavaScript (javascript)

假设您有以下 HTML 代码片段

<div id="note">
    JavaScript textContent Demo!
    <span style="display:none">Hidden Text!</span>
    <!-- my comment -->
</div>    Code language: HTML, XML (xml)

以下示例使用 textContent 属性获取 <div> 元素的文本

let note = document.getElementById('note');
console.log(note.textContent);Code language: JavaScript (javascript)

工作原理。

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

输出

JavaScript textContent Demo!
Hidden Text!

从输出中可以清楚地看到，textContent 属性返回每个 子节点 的 textContent 的串联，不包括注释（以及处理指令）。

textContent 与 innerText

另一方面，innerText 会考虑 CSS 样式，只返回可读文本。例如

let note = document.getElementById('note');
console.log(note.innerText);Code language: JavaScript (javascript)

输出

JavaScript textContent Demo!

可以看到，隐藏的文本和注释没有返回。

由于 innerText 属性使用最新的 CSS 计算文本，因此访问它会触发回流，这在计算上很昂贵。

回流是指网页浏览器需要重新处理和绘制网页部分或全部内容。

设置节点的 textContent

除了读取 textContent 之外，您还可以使用 textContent 属性为节点设置文本

node.textContent = newText;

当您在节点上设置 textContent 时，节点的所有子节点都将被删除，并替换为一个具有 newText 值的单个文本节点。例如

let note = document.getElementById('note');
note.textContent = 'This is a note';Code language: JavaScript (javascript)

总结

• 使用 textContent 属性返回每个子节点的 textContent 的串联。您可以使用它为节点设置文本。
• innerText 返回考虑 CSS 样式的可读文本。

测验