Node.textContent

值

一个字符串或 null.

描述

textContent 的值取决于具体情况：

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

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

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

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

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

与 innerText 的区别

不要对 Node.textContent 和 HTMLElement.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 片段：

<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>

IE8 的替代方法

// 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);
        },
      },
    );
  })();
}

规范

浏览器兼容性

参见

• HTMLElement.innerText
• Element.innerHTML
• More on differences between innerText and textContent (blog post)