textContent与innerText的不同
by Sandy_zc_1 :因为发现网络上很少有这方面的内容，因此就把自己私有blog上的这篇文章搬出来到Boluor的公开blog，方便其它人查阅。
————————————————————————————————————————
以下是正文↓↓↓
textContent与innerText的不同
IE下有个innerText属性，FF下有个textContent属性。很多以前给IE写脚本的，在FF下找不到innerText属性，于是网上搜到的建议是用textContent来替代。反之给FF写脚本的也一样。
但是实际上，这里有个误解。网上很多文章说“FF下等效于innerText属性的属性是textContent”————但是事实上并非如此。innerText与textContent有几点很重要的不同，导致它们在一些情况下不能直接互换使用。
前些日子写了个代码高亮JS插件，在IE下工作完全正常，而在FF下就不对头。在IE下使用的是innerText属性，而在FF下使用的则是textContent属性。在进行字符串处理的时候二者的不同导致了完全不一样的结果。于是就专门写了点东西来测试二者的不同。
根据测试的结果表明：
innerText：它的内容实际上就是你在浏览器看到的内容。它的值是经过浏览器解释过的结果：它将元素的innerHTML换码、解释，最终显示出来，然后去除各种格式信息留下的纯文本。它会把<br/>换成换行符，会将多个空格并成一个空格对待，而本来的换行符却并不会引起换行，IE会将其当作一个普通的单词边界（一般是空格）。再说的形象点，一个元素的innerText属性的值，和你将这个元素内容复制粘贴到记事本里的内容一致。
textContent：它的内容则是innerHTML去除所有标签后的内容（我怀疑这个是从XMLDOM中照搬过来的属性，特性完全一致）。它会将innerHTML中的转义字符（<、 什么的）进行换码，但是不对任何html标签进行解释，而是直接剔除它们。它也不会对innerHTML中的文本按照HTML的方式进行格式转换，比如多个空格还会原原本本地保留，不会合并为一个空格，换行符仍然存在（相反<br/>却不会导致换行）。
更加简练的总结：IE中的innerText是需要对innerHTML的值进行：
1、HTML转义（等同于XML转义，对<、&等转义字符进行处理）；
2、经过HTML解释和CSS样式解释；
3、之后又剔除格式信息
之后留下的纯文本。
而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。
一个例子：
<divid=”T1″>
ABCD
EFGHIJ<br/>KLM N
OPQ<div>RS</div>T
T
<div>
这个id为T1的div，
在IE中的innerText属性的值为：
ABCDEFGHIJ
KLMNOPQ
RS
TT
而在FF中的textContent的属性的值为：
(这里有个换行)
ABCD
EFGHIJKLMN
OPQRST
T
注意那个div中还嵌套了个div，而这个更能反映IE的innerText和FF的textContent各自的处理方式的不同：
div是块（block）元素，默认会独占一行，因此，在IE中的innerText反映为上述div中的RS独占一行，而FF的textContent完全不理会HTML格式，因此其textContent中的RS是和其它字符连在一起的，不会独占一行。
.
如果想更进一步，看看这个有趣的结果：
假如给里面那个div加一个style=”float:left;”，那么这个div就会由块元素变化为行元素，不再独占一行，因此IE的innerText属性中RS便不再独占一行，而与其它字符连在一起，而在FF中由于textContent不理会标签更不会理会CSS，因此它的textContent属性的值不会有任何变化。
.
这么看来，很多网上说的“让FF支持innerText属性”云云，其实都是多多少少有问题的。要实现IE的innerText，远没有想象中的那么简单，你若要使用JavaScript让FF拥有和innerText完全一样的效果，得自己把html标签属性全部parse一遍，解释它们，甚至还需要去解释css……
（不过根据原理，貌似通过剪贴板的复制和取回操作可以在FF下模拟innerText效果（这个未测试），但是1有副作用，2FF下的剪贴板操作也很麻烦。）
不过还好，大多数时候我们并不需要那么精确，使用innerHTML做点简单的处理即可达到比较接近的效果了。
注：以上代码均在IE6和FF3下完成测试。
本文转自：http://www.cnblogs.com/koking/archive/2010/10/21/1857349.html
分享到：
相关推荐
textContent与innerText的不同 IE下有个innerText属性，FF下有个textContent属性。很多以前给IE写脚本的，在FF下找不到innerText属性，于是网上搜到的建议是用textContent来替代。反之给FF写脚本的也一样。 但是实际...
今天在使用innerText时遇到一个兼容性问题，FireFox不支持innerText方法，查了下MDN，发现FireFox下有个类似的方法，叫textContent，它和IE的innerText类似， 都是用来获取（设置）元素中text的方法。语法 •设置 ...
textContent在Firefox下与innerText等效的属性
今天小编就为大家分享一篇关于js中innerText/textContent和innerHTML与target和currentTarget的区别，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
主要介绍了javascript中的innerHTML属性，outerHTML属性，textContent属性，innerText属性区别详解，都是个人经验的总结，分享给大家，希望大家能够喜欢。
返回多个子节点的换行、适当间隔、规范化的纯文本表示，这不能通过 textContent 或 innerText 完成，因为这两种方法有很大不同，甚至 innerText 在浏览器之间的工作方式也不同。 更多信息： 免责声明 这是我在 ...
IE中的获取文本方法innerText在firefox中不支持 firefox改成了textContent方法/属性 并且在Firefox中文本中间的空白自符被无情的替换没了 使用起来异常不方便 现在好了，用Javascript重新定义了innerText方法 使得在...
为firefox实现innerText属性很多代码写了又忘忘了又写，很浪费，所以决定养成做...因为textContent没有考虑元素的display方式，所以不完全与IE兼容 代码如下: <html> <body> ”d1″><a>ccc</a>ddd<div>eeee
textContent，innerText，outerText，textNode.data工程化JS JS Regenerator运行时同步网络包 webpack打包形成的模块结果分析样式加载器，css加载器，较少加载器，URL加载器样式文件，图片文字文件处理摇树初步组件...
唯一需要注意的地方： innerText与textContent，显示页面的时候不能用innerHTML，否则会被解析。innerText与textContent是在除FF之外的浏览器与FF之间的差异。 代码如下: var innerText = document.body.innerText ?...
firefox支持innerHTML但却不支持innerText，它支持textContent来实现innerText，不过默认把多余的空格也保留了。如果不用textContent，如果字符串里面不包含HTML代码也可以用innerHTML代替。 2.禁止选取网页内容： ...
就像DOM Node#innerText getter一样，但是与规范有些偏差。 返回结果文本。 您通常希望使用 （ textContent ），但是hast-util-to-text （ innerText ）添加了例如使用 元素的换行符。安装该软件包 ：需要使用...
在IE和FireFox(FF)中js和css的不同 css: 1.... IE中innerText在FF中没有，使用textContent; eg: 代码如下:var obj=document.getElementById(“_td”); var text; if(obj.innerText) { text=obj.innerText; } else if(ob
(temp.textContent = this) : (temp.innerText = this); var output = temp[removed]; temp = null; return output; } String.prototype.HTMLDecode = function() { var temp = document.creat
注：火狐不支持innerText，需要使用 textContent 属性，而IE早期版本不支持此属性，为了同时兼容IE及火狐，需要进行判断操作. 因为innerText（textContent）会获取纯文本内容，忽略html节点标签，而innerHTML会显示...