节点：textContent 属性

textContent 是 Node 接口的一个属性，表示节点及其后代的文本内容。

注意：textContent 和 HTMLElement.innerText 很容易混淆，但这两个属性在 某些重要方面存在差异。

值

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

  • 如果节点是 document 或 文档类型声明，则 textContent 返回 null。

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

  • 如果节点是 CDATA 节、注释、处理指令 或 文本节点，则 textContent 返回或设置节点内部的文本，即 Node.nodeValue。
  • 对于其他节点类型，textContent 返回每个子节点的 textContent 的连接，但不包括注释和处理指令。（如果节点没有子节点，则为一个空字符串。）

警告：在节点上设置 textContent 会删除节点的所有子节点，并用具有给定字符串值的单个文本节点替换它们。

与 innerText 的区别

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

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

与 innerHTML 的区别

Element.innerHTML 返回 HTML，顾名思义。有时人们使用 innerHTML 来检索或写入元素内的文本，但 textContent 具有更好的性能，因为它的值不会被解析为 HTML。

此外，使用 textContent 可以防止 跨站脚本攻击。

示例

从以下 HTML 片段开始。

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

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

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

如果您希望设置元素的文本内容，可以执行以下操作。

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

规范

规范
DOM 标准
# dom-node-textcontent

浏览器兼容性

BCD 表仅在启用了 JavaScript 的浏览器中加载。

另请参阅