innerHTML，innerText，textContent和value的不同之处

当我们想要取出一段页面中的文本的时候，有时在使用innerHTML，innerText，textContent和value中的任何一个方法取出的值是一样的，这时会给使用者一种错觉，他们的作用是一样的，但是这是真的吗？

那么接下来我们来了解下innerHTML，innerText，textContent和value分别是什么

1.innerHTML

首先来看MDN的解释：Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。
innerHTML会获取页面中html标签起始至标签结束中间的所有内容包括后代元素的html标签与其中的内容，
对自结尾的html标签和伪元素中无效(例：<img/>)。并会将& , < , > 转义为 &amp;, &lt; 和 &gt

通过innerHTML进行赋值会清空所选标签内的所有内容后在进行赋值

此时若我们要取当前div中的值因为会导致特殊文本的转义这时候用innerHTML就不是很合适了。

2.innerText

innerText最早是由IE引入的，并于2016年正式成为了HTML的标准，
innerText会获取页面中html标签解释后所展示的内容，但不会获取script和style标签中的内容
会获取将特殊字符和格式化字符( 等)渲染后的结果，
可以认为页面中的展示的文本是什么样子，innerText获取的就是什么样子。
在IE9以下中会受部分css样式影响，如浮动

3.textContent

 textContent与innerText在使用时看似是最相似，但是他们有很多不同之处。
1.textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，并完全还原文本在html标签中的空格与换行，然而 innerText 不会。
2.innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
3.innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会
4.在 IE (小于等于IE11的版本)中对 innerText 进行修改， 不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）

4.value

到这里大家应该对innerHTML、innerText和textContent解了，且上述的关系与行为操作均为非表单元素，下面我们将详细讲解表单元素中的value属性

注：textarea和input[type='text']的赋值操作与文本框内的写入操作属于同一操作

textarea：
  FireFox：
    innerHTML：通过innerHTML的赋值会影响textContent的取值，且再value赋值前会影响value取值，在value赋值后则value与innerHTML无关。
    textContent：通过textContent的赋值会影响innerHTML的取值，且再value赋值前会影响value取值，在value赋值后则value与textContent无关。
    value: 赋值后则生效
    
  Chrome：
    innerHTML、innerText、textContent再value赋值前进行赋值均会影响包含value的取值，在value赋值后则value与其无关
    
  IE6-11：
    innerHTML、innerText、textContent和value均可相互影响取值。

input[type='text']：
  FireFox：
      innerHTML：通过innerHTML的赋值会影响textContent的取值，且再value赋值前会影响value取值，在value赋值后则value与innerHTML无关。
      textContent：通过textContent的赋值会影响innerHTML的取值，且再value赋值前会影响value取值，在value赋值后则value与textContent无关。
      value: 赋值后则生效
      
  Chrome:
        innerHTML：innerHTML可被设置但无效，但会影响textContent的取值
        textContent：textContent可被设置但无效，会始终影响value的取值
        innerText：innerText可被设置且有效，不会影响其他方法的取值
        value：value可被设置且有效，不会影响其他方法的取值
        
  IE6~8：
        innerHTML：设置时报错
        textContent：textContent可被设置但无效，会始终影响value的取值
        innerText：innerText可被设置但无效，会始终影响value的取值
        value：value可被设置且有效，不会影响其他方法的取值
        
  IE9~11：
        innerHTML：innerHTML可被设置且有效，会影响textContent和innerText的取值
        textContent：textContent可被设置但无效，会始终影响value的取值
        innerText：innerText可被设置但无效，会始终影响value的取值
        value：value可被设置且有效，不会影响其他方法的取值