在本教程中,您将学习如何使用 JavaScript 元素节点的 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);
代码是如何运行的。
输出:
JavaScript textContent Demo!
Hidden Text!
从输出中可以清楚地看到,textContent 属性返回了每个子节点的 textContent 内容连接的结果,但不包括注释。
innerText 它考虑了 CSS 样式并返回友好的可读文本。例如:
let note = document.getElementById('note');
console.log(note.innerText);
输出:
JavaScript textContent Demo!
正如您所看到的,隐藏的文本和注释不会被返回。
由于 innerText 属性使用最新的 CSS 来计算文本,因此访问它会触发回流,这将会消耗大量的计算成本。当网络浏览器需要再次处理和绘制部分或全部网页时,就会发生重绘。
除了读取 textContent 之外 ,您还可以使用 textContent 属性来设置节点的文本:
node.textContent = newText;
当您在节点上设置 textContent 时,该节点的所有子节点都将被删除并替换为 newText 的值。例如:
let note = document.getElementById('note');
note.textContent = 'This is a note';
使用 textContent 属性返回每个子节点的内容连接的结果。您可以使用 textContent 来设置节点的文本。innerText 返回友好的可读文本格式。