Node.textContent

Node.textContent 属性可以表示一个节点及其内部节点的文本内容。

语法

var text = element.textContent;
element.textContent = "this is some sample text";

描述

• 如果 element 是 Document，DocumentType 或者 Notation 类型节点，则 textContent 返回 null。如果你要获取整个文档的文本以及CDATA数据，可以使用 document.documentElement.textContent。
• 如果节点是个CDATA片段，注释，ProcessingInstruction节点或一个文本节点，textContent 返回节点内部的文本内容（即 nodeValue）。
• 对于其他节点类型，textContent 将所有子节点的 textContent 合并后返回，除了注释、ProcessingInstruction节点。如果该节点没有子节点的话，返回一个空字符串。
• 在节点上设置 textContent 属性的话，会删除它的所有子节点，并替换为一个具有给定值的文本节点。

与innerText的区别

Internet Explorer 引入了 element.innerText，目的是相似的，不过有下面几点不同之处：

• textContent 会获取所有元素的内容，包括<script> 和 <style> 元素，然而 IE 专有属性 innerText 不会。
• innerText 会受样式的影响，它不返回隐藏元素的文本，但 textContent 返回。
• 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
• 与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地销毁所有内部文本节点（由此导致无法再将这些被销毁的文本节点插入到当前元素或任何其他元素中）。

与innerHTML的区别

正如它的名字，innerHTML 返回 HTML 文本。很多时候，当需要往一个元素里面写文本的时候，人们使用 innerHTML，但其实应该使用 textContent，因为文本不会被解析为 HTML，所以它很可能在性能表现上会更好，同时还能够避免XSS攻击。

例子

// 给定如下HTML:
//   <div id="divA">This is <span>some</span> text</div>

// 获得文本内容:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// 设置文本内容:
document.getElementById("divA").textContent = "This is some text";
// divA的HTML现在是这样的:
//   <div id="divA">This is some text</div>

浏览器兼容性

规范

• textContent

相关链接

• More on differences between innerText and textContent