javascript中textContent与innerText的异同分析

不念不忘少年蓝@ 2022-07-29 11:59 156阅读 0赞

原文链接：[http://www.jb51.net/article/25082.htm][http_www.jb51.net_article_25082.htm]

**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换码、解释，最终显示出来，然后去除各种格式信息留下的纯文本。它会把  
换成换行符，会将多个空格并成一个空格对待，而本来的换行符却并不会引起换行，IE会将其当作一个普通的单词边界（一般是空格）。再说的形象点，一个元素的innerText属性的值，和你将这个元素内容复制粘贴到记事本里的内容一致。

textContent：它的内容则是innerHTML去除所有标签后的内容（我怀疑这个是从XMLDOM中照搬过来的属性，特性完全一致）。它会将innerHTML中的转义字符（<、 什么的）进行换码，但是不对任何html标签进行解释，而是直接剔除它们。它也不会对innerHTML中的文本按照HTML的方式进行格式转换，比如多个空格还会原原本本地保留，不会合并为一个空格，换行符仍然存在（相反  
却不会导致换行）。

更加简练的总结：IE中的innerText是需要对innerHTML的值进行：  
1、**HTML转义（等同于XML转义，对<、&等转义字符进行处理）；**  
2、**经过HTML解释和CSS样式解释**；  
3、**之后又剔除格式信息**  
之后留下的纯文本。  
而FF中的textContent没有2、3步，在经过了HTML转义之后直接剔除所有html标签后得到的纯文本。

一个例子：

这个id为T1的div，  
在IE中的innerText属性的值为：

ABCD EFG HIJ 
    KLM N OPQ 
    RS 
    T T

而在FF中的textContent的属性的值为：

(这里有个换行) 
    ABCD 
    EFG HIJKLM N 
    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下完成测试。

**个人附加说明：**  
以下代码

在火狐5.0下  
![火狐][20160417162504926]  
在ie11下  
![ie][]  
若代码多加一个K,变成这样

那么 在ie11下最终结果将是这样  
![ie1][]  
火狐5.0下是这样  
![火狐1][1]

个人理解，ie还会把一个block元素的剩余空白部分解释为一行，若有内容则另起一行。最后一行除外，不会在空白处没有内容时单独留出来一行，但如果有内容，同样另起一行显示。

[http_www.jb51.net_article_25082.htm]: http://www.jb51.net/article/25082.htm
[20160417162504926]: /images/20220724/336a9036b66b4691bafd668954460448.png
[ie]: /images/20220724/eadd9df7a3c74ce38712bdbb63354cd1.png
[ie1]: /images/20220724/7151ac5dd21447cb9f03ae4ff236410a.png
[1]: /images/20220724/3772b07f9ee940aeae83d671ca56835e.png