Node.textContent

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

备注: textContentHTMLElement.innerText 容易混淆,但这两个属性在重要方面有不同之处

一个字符串或 null.

描述

textContent 的值取决于具体情况:

  • 如果节点是一个 document,或者一个 DOCTYPE ,则 textContent 返回 null

    备注: 如果你要获取整个文档的文本以及 CDATA data ,可以使用 document.documentElement.textContent

  • 如果节点是个 CDATA section、注释、processing instruction 或者 text nodetextContent 返回节点内部的文本内容,例如 Node.nodeValue

  • 对于其他节点类型,textContent 将所有子节点的 textContent 合并后返回,除了注释和 processing instructions。(如果该节点没有子节点的话,返回一个空字符串。)

在节点上设置 textContent 属性的话,会删除它的所有子节点,并替换为一个具有给定值的文本节点。

innerText 的区别

不要对 Node.textContentHTMLElement.innerText 之间的差异感到困惑。虽然名字看起来很相似,但有重要的不同之处:

  • textContent 会获取所有元素的内容,包括 <script><style> 元素,然而 innerText 只展示给人看的元素。

  • textContent 会返回节点中的每一个元素。相反,innerText 受 CSS 样式的影响,并且不会返回隐藏元素的文本,

    • 此外,由于 innerText 受 CSS 样式的影响,它会触发回流( reflow )去确保是最新的计算样式。(回流在计算上可能会非常昂贵,因此应尽可能避免。)
  • textContent 不同的是,在 Internet Explorer (小于和等于 11 的版本) 中对 innerText 进行修改,不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点。在之后不可能再次将节点再次插入到任何其他元素或同一元素中。

innerHTML 的区别

正如其名称,Element.innerHTML 返回 HTML。通常,为了在元素中检索或写入文本,人们使用 innerHTML。但是,textContent 通常具有更好的性能,因为文本不会被解析为 HTML。

此外,使用 textContent 可以防止 XSS 攻击

示例

给出这个 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>

IE8 的替代方法

js
// Source: Eli Grey @ https://eligrey.com/blog/post/textcontent-in-ie8
if (
  Object.defineProperty &&
  Object.getOwnPropertyDescriptor &&
  Object.getOwnPropertyDescriptor(Element.prototype, "textContent") &&
  !Object.getOwnPropertyDescriptor(Element.prototype, "textContent").get
) {
  (function () {
    var innerText = Object.getOwnPropertyDescriptor(
      Element.prototype,
      "innerText",
    );
    Object.defineProperty(
      Element.prototype,
      "textContent",
      // Passing innerText or innerText.get directly does not work,
      // wrapper function is required.
      {
        get: function () {
          return innerText.get.call(this);
        },
        set: function (s) {
          return innerText.set.call(this, s);
        },
      },
    );
  })();
}

规范

Specification
DOM
# dom-node-textcontent

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
textContent
Can be set with TrustedScript instances in HTMLScriptElement.
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

参见