innerText和textContent的区别

innerText和textContent的作用都是获取元素之间的文本内容，但是他们的表现确是不同的，如下：

区别

1、innerText的值依赖于浏览器的显示，textContent依赖于代码的显示,如下代码：

<div id="container">
    <span>666</span>
    <span>999</span>
</div>
<script>
    var oDiv=document.getElementById('container');
    console.log(oDiv.innerText,oDiv.textContent);
</script>

输出结果：
innerText:666 999

textContent:
        666
        999
复制代码

在浏览器中显示的实际是666 999，处于同一行内，但是在代码中他们却不是同一行。

2、如果一个元素之间包含了script标签或者style标签，innerText是获取不到这两个元素之间的文本的，而textContent可以，如下代码：

<div id="container">
    <script>var a=666;</script>
    <span>666</span>
    <span>999</span>
</div>
<script>
    var oDiv=document.getElementById('container');
    console.log(oDiv.innerText,oDiv.textContent);
</script>   
输出结果：
innerText:666 999

textContent:
    var a=666;
    666
    999   
复制代码

其实这个区别是由第一个区别引申而来的，在浏览器中自然是不会在屏幕中输出script和style标签之间的内容，而innerText的值依赖于浏览器的显示，所以仍然是666 999。

3、textContent会把空标签解析成换行（几个空标签就是几行），innerText只会把block元素类型的空标签解析换行，并且如果是多个的话仍看成是一个，而inline类型的原素则解析成空格，如下代码：

<div id="container">
    666
    <span></span>
    <span></span>
    999
</div>
<script>
    var oDiv=document.getElementById('container');
    console.log(oDiv.innerText,oDiv.textContent);
</script>
输出结果：
innerText:666 999

textContent:
    666
    
    
    999
复制代码

其实这个区别还是由第一点引申而来的。

4、innerText的设置会引发浏览器的回流操作，而textContent则不一定会

innerText和textContent两个属性并非html5的规范属性，他是各个浏览器厂商自己实现的，那么也就是说有些浏览器实现了innerText，有些浏览器实现了textContent，有些浏览器两个属性都有实现，因此书写的时候就要考虑到兼容性判断了，那么正确的写法最好是这样的：

if(el.textContent){
    el.textContent='666';
}else{
    el.innerText='666';
}
复制代码

那么为什么这样写更好呢，这就是这个区别所在了，innerText的操作一定会引起浏览器回流，那么是比较耗性能的。虽说textContent并非一定不会触发回流，但他也是在特定情况下（所赋值的内容超出了容器尺寸，影响到了页面整体布局）才会触发回流，一般只是触发浏览器的重绘。

5、innerText对IE兼容性较好（IE6+），textContent则兼容IE9+

抹平区别

如果想让他们表现的一直呢，改如何去做？可以使用css控制，如下代码：

#container{
    white-space: pre;
}
复制代码