MDN will switch to a new design later today, a sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

语法

let text = element.textContent;
element.textContent = "this is some sample text";

描述

  • 如果 element 是 Document,DocumentType 或者 Notation 类型节点,则 textContent 返回 null。如果你要获取整个文档的文本以及CDATA数据,可以使用 document.documentElement.textContent
  • 如果节点是个CDATA片段,注释,ProcessingInstruction节点或一个文本节点,textContent 返回节点内部的文本内容(即 nodeValue)。
  • 对于其他节点类型,textContent 将所有子节点的 textContent 合并后返回,除了注释、ProcessingInstruction节点。如果该节点没有子节点的话,返回一个空字符串。
  • 在节点上设置 textContent 属性的话,会删除它的所有子节点,并替换为一个具有给定值的文本节点。

innerText的区别

Internet Explorer 引入了 node.innerText。意图类似,但有以下区别:

  • textContent 会获取所有元素的内容,包括 <script> 和 <style> 元素,然而 innerText 不会。
  • innerText意识到样式,并且不会返回隐藏元素的文本,而textContent会。
  • 由于 innerText 受 CSS 样式的影响,它会触发重排(reflow),但textContent 不会。
  • 与 textContent 不同的是, 在 Internet Explorer (对于小于等于 IE11 的版本) 中对 innerText 进行修改, 不仅会移除当前元素的子节点,而且还会永久性地破坏所有后代文本节点(所以不可能再次将节点再次插入到任何其他元素或同一元素中)。

innerHTML的区别

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

例子

// 给定如下HTML:
//   <div id="divA">This is <span>some</span> text</div>

// 获得文本内容:
var text = document.getElementById("divA").textContent;
// |text| is set to "This is some text".

// 设置文本内容:
document.getElementById("divA").textContent = "This is some text";
// divA的HTML现在是这样的:
//   <div id="divA">This is some text</div>

Polyfill for 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",
     {
       get: function() {
         return innerText.get.call(this);
       },
       set: function(s) {
         return innerText.set.call(this, s);
       }
     }
   );
  })();
}

 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1+ (Yes) 9 (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

规范

相关链接

文档标签和贡献者

 此页面的贡献者: xgqfrms-GitHub, Wushaowei, AlexChao, teoli, chyingp
 最后编辑者: xgqfrms-GitHub,