innerHTML,innerText,textContent的区别详解

HTML-CSS
留言

用惯了jQuery的html()方法，突然有一天不用jQuery的时候发现自己懵逼了，只知道有innerHTML,innerText,textContent这三种属性可以改变DOM元素的内容，可是他们具体的区别及适用场合在头脑中却不够清晰。本着一查到底的精神，今天就来膜拜一下这三个属性的各自成名绝技。
本文将从以下几个方面来介绍：

  1. 规范解读
  2. 属性的异同
  3. 各自适用场合

规范解读

innerHTML

element.innerHTML
Returns a fragment of HTML or XML that represents the element's contents.
//取值操作，返回内容包含描述所有后代元素的序列化HTML代码。        

element.innerHTML = value 
Can be set, to replace the contents of the element with nodes parsed from the given string.
//赋值操作，用解析后的字符串替换元素的内容

innerText

element.innerText
Returns the element's text content "as rendered".
//取值操作，返回元素“渲染”后的文本内容

element.innerText = value 
Can be set, to replace the element's children with the given value, but with line breaks converted to br elements.
//赋值操作，用所给的值替换该元素的子元素，其中换行符会被替换为`<br>`元素

textContent

element.textContent
returns the text content of this node and its descendants. 
//取值操作，返回一个节点元素及其后代的文本内容

element.textContent = value
On setting, any possible children this node may have are removed and, if it the new string is not empty or null, 
replaced by a single Text node containing the string this attribute is set to. 
//赋值操作，用所给的值以字符串文本的形式替换该元素的子元素

属性的异同

是不是对上面的规范的介绍一知半解？没关系，接下来将从取值操作和赋值操作的角度用实例来说明他们之间的差异

<style type="text/css">
  #demo{color:red;text-transform: uppercase;}
</style>
<div id="demo">
    This is &<> '' ""
    <br>
    <span>some</span>
    demo
</div>
<h2>innerHTML</h2>
<div id="asHTML"></div>
<h2>innerText</h2>
<div id="asText"></div>
<h2>textContent</h2>
<div id="asContent"></div>

<script type="text/javascript">
  var get = document.getElementById('demo');
  var string = "<a href='http://www.baidu.com'> &amp; www.baidu.com <span>child</span> </a>";
  
  var HTML = document.getElementById('asHTML');
  console.log(get.innerHTML);
  HTML.innerHTML = string;
  
  var Text = document.getElementById('asText');
  console.log(demo.innerText);
  Text.innerText = string;
  
  var content = document.getElementById('asContent');
  console.log(demo.textContent);
  content.textContent = string;
</script>

取值操作返回结果

innerHTML

This is &amp; &lt;&gt; '' ""
<br>
<span>some</span>
demo

返回经过序列化算法之后的html代码，其中 & < >等特殊符号被转义,子元素原样输出
innerText

THIS IS & < > '' "" 
SOME DEMO

返回被部分CSS渲染后的结果，多余的空格被合并
textContent

This is & <> '' ""

some
demo

返回元素及其后代元素的文本内容，特殊字符不被转义

赋值操作返回结果

innerHTML

& www.baidu.com child

后代元素html标签被解析,实体字符被解析
innerText

<a href='http://www.baidu.com'> &amp; www.baidu.com <span>child</span> </a>

textContent

<a href='http://www.baidu.com'> &amp; www.baidu.com <span>child</span> </a>

差异

浏览器兼容性

从Caniuse网站上查询结果来看：
innerHTML IE8/9部分支持 IE10+ chrome45+
在IE8/9中，innerHTML对以下元素是只读的：
col, colgroup, frameset, html, head, style, table, tbody, tfoot, thead, title, and tr.
innerText IE6+ chrome45+
textContent IE9+ chrome45+

textContent与innerText的区别

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

textContent与innerHTML的区别

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

相同点

都可用于设置DOM元素的内容

适用场合

在取值操作中
如果取出DOM元素的后代元素及其内容的html代码，一般使用innerHTML
如果需要考虑DOM元素内容的样式，一般使用innerText
如果只想取得DOM元素及其后代元素的文本内容，一般使用textContent，在低版本的IE中可使用innerText
在赋值操作中
如果是需要赋值安全的html片段，一般使用innerHTML
如果是需要赋值纯文本，一般使用textContent，在低版本的IE中可使用innerText

参考文章：

  1. 被玩坏的innerHTML、innerText、textContent和value属性
  2. Node.textContent