Node.textContent

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

注意: textContent 和 HTMLElement.innerText 容易混淆,但这两个属性在重要方面有不同之处 。

语法

let text = someNode.textContent;
someOtherNode.textContent = string;

返回值

一个字符串或 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.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);
       }
     }
   );
  })();
}

浏览器兼容性

BCD tables only load in the browser

规范

Specification Status Comment
DOM
Node.textContent
Living Standard No change vs. DOM4
DOM4
Node.textContent
Obsolete
Document Object Model (DOM) Level 3 Core Specification
Node.textContent
Obsolete Introduced

相关链接