Node: textContent 属性

值

一个字符串，或者 null。其值取决于具体情况。

• 如果该节点是 document 或 doctype，则 textContent 返回 null。

  注意：要获取整个文档的所有文本和 CDATA 数据，请使用 document.documentElement.textContent。

• 如果该节点是 CDATA 部分、注释、处理指令或文本节点，则 textContent 返回或设置节点内的文本，即 Node.nodeValue。

• 对于其他节点类型，textContent 返回所有子节点的 textContent 的串联，但不包括注释和处理指令。（如果节点没有子节点，则为空字符串。）

与 innerText 的区别

不要混淆 Node.textContent 和 HTMLElement.innerText 之间的区别。尽管名称相似，但它们之间存在重要的差异。

• textContent 获取所有元素的內容，包括 <script> 和 <style> 元素。相比之下，innerText 只显示“人类可读”的元素。
• textContent 返回节点中的所有元素。相比之下，innerText 考虑了样式，并且不会返回“隐藏”元素的文本。
  • 此外，由于 innerText 会考虑 CSS 样式，读取 innerText 的值会触发 重排，以确保计算样式是最新的。（重排在计算上可能很昂贵，因此应尽可能避免。）

与 innerHTML 的区别

Element.innerHTML 如其名称所示，用于获取或设置 HTML。我们不建议使用 innerHTML 来获取或设置元素内的文本，因为它处理的是原始 HTML 而不是纯文本，并且可能容易受到 XSS 攻击。即使您确定文本不包含 HTML 语法，它仍然不够语义化且速度较慢，因为它需要调用 HTML 解析器。

示例

从这个 HTML 片段开始。

<div id="divA">This is <span>some</span> text!</div>

您可以使用 textContent 来获取元素的文本内容。

let text = document.getElementById("divA").textContent;
// The text variable is now: 'This is some text!'

如果您想设置元素的文本内容，可以这样做：

document.getElementById("divA").textContent = "This text is different!";
// The HTML for divA is now:
// <div id="divA">This text is different!</div>

规范

浏览器兼容性

另见

• HTMLElement.innerText
• Element.innerHTML