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); // 输出结果: // innerText:666 999 // textContent: // 666 // 999 </script>
在浏览器中显示的实际是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); // 输出结果: // innerText:666 999 // textContent: // var a=666; // 666 // 999 </script>
这个区别是由第一个区别引申而来的,在浏览器中自然是不会在屏幕中输出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); // 输出结果: // innerText:666 999 // textContent: // 666 // 999 </script>
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; }