javascript textContent與innerText的異同分析
更新時間：2010年10月22日 15:35:12 作者：
因?yàn)榘l(fā)現(xiàn)網(wǎng)絡(luò)上很少有這方面的內(nèi)容，因此就把自己私有blog上的這篇文章搬出來到Boluor的公開blog，方便其它人查閱。
textContent與innerText的不同
IE下有個innerText屬性，F(xiàn)F下有個textContent屬性。很多以前給IE寫腳本的，在FF下找不到innerText屬性，于是網(wǎng)上搜到的建議是用textContent來替代。反之給FF寫腳本的也一樣。
但是實(shí)際上，這里有個誤解。網(wǎng)上很多文章說“FF下等效于innerText屬性的屬性是textContent”————但是事實(shí)上并非如此。innerText與textContent有幾點(diǎn)很重要的不同，導(dǎo)致它們在一些情況下不能直接互換使用。
前些日子寫了個代碼高亮JS插件，在IE下工作完全正常，而在FF下就不對頭。在IE下使用的是innerText屬性，而在FF下使用的則是textContent屬性。在進(jìn)行字符串處理的時候二者的不同導(dǎo)致了完全不一樣的結(jié)果。于是就專門寫了點(diǎn)東西來測試二者的不同。
根據(jù)測試的結(jié)果表明：
innerText：它的內(nèi)容實(shí)際上就是你在瀏覽器看到的內(nèi)容。它的值是經(jīng)過瀏覽器解釋過的結(jié)果：它將元素的innerHTML換碼、解釋，最終顯示出來，然后去除各種格式信息留下的純文本。它會把<br/>換成換行符，會將多個空格并成一個空格對待，而本來的換行符卻并不會引起換行，IE會將其當(dāng)作一個普通的單詞邊界（一般是空格）。再說的形象點(diǎn)，一個元素的innerText屬性的值，和你將這個元素內(nèi)容復(fù)制粘貼到記事本里的內(nèi)容一致。
textContent：它的內(nèi)容則是innerHTML去除所有標(biāo)簽后的內(nèi)容（我懷疑這個是從XMLDOM中照搬過來的屬性，特性完全一致）。它會將innerHTML中的轉(zhuǎn)義字符（<、 什么的）進(jìn)行換碼，但是不對任何html標(biāo)簽進(jìn)行解釋，而是直接剔除它們。它也不會對innerHTML中的文本按照HTML的方式進(jìn)行格式轉(zhuǎn)換，比如多個空格還會原原本本地保留，不會合并為一個空格，換行符仍然存在（相反<br/>卻不會導(dǎo)致?lián)Q行）。
更加簡練的總結(jié)：IE中的innerText是需要對innerHTML的值進(jìn)行：
1、HTML轉(zhuǎn)義（等同于XML轉(zhuǎn)義，對<、&等轉(zhuǎn)義字符進(jìn)行處理）；
2、經(jīng)過HTML解釋和CSS樣式解釋；
3、之后又剔除格式信息
之后留下的純文本。
而FF中的textContent沒有2、3步，在經(jīng)過了HTML轉(zhuǎn)義之后直接剔除所有html標(biāo)簽后得到的純文本。
一個例子：
<div id=”T1″>
ABCD
EFG HIJ<br/>KLM N
OPQ<div>RS</div>T
T
<div>
這個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）元素，默認(rèn)會獨(dú)占一行，因此，在IE中的innerText反映為上述div中的RS獨(dú)占一行，而FF的textContent完全不理會HTML格式，因此其textContent中的RS是和其它字符連在一起的，不會獨(dú)占一行。
如果想更進(jìn)一步，看看這個有趣的結(jié)果：
假如給里面那個div加一個style=”float:left;”，那么這個div就會由塊元素變化為行元素，不再獨(dú)占一行，因此IE的innerText屬性中RS便不再獨(dú)占一行，而與其它字符連在一起，而在FF中由于textContent不理會標(biāo)簽更不會理會CSS，因此它的textContent屬性的值不會有任何變化。
這么看來，很多網(wǎng)上說的“讓FF支持innerText屬性”云云，其實(shí)都是多多少少有問題的。要實(shí)現(xiàn)IE的innerText，遠(yuǎn)沒有想象中的那么簡單，你若要使用JavaScript讓FF擁有和innerText完全一樣的效果，得自己把html標(biāo)簽屬性全部parse一遍，解釋它們，甚至還需要去解釋css……
（不過根據(jù)原理，貌似通過剪貼板的復(fù)制和取回操作可以在FF下模擬innerText效果（這個未測試），但是1有副作用，2FF下的剪貼板操作也很麻煩。）
不過還好，大多數(shù)時候我們并不需要那么精確，使用innerHTML做點(diǎn)簡單的處理即可達(dá)到比較接近的效果了。
注：以上代碼均在IE6和FF3下完成測試。
IE下有個innerText屬性，F(xiàn)F下有個textContent屬性。很多以前給IE寫腳本的，在FF下找不到innerText屬性，于是網(wǎng)上搜到的建議是用textContent來替代。反之給FF寫腳本的也一樣。
但是實(shí)際上，這里有個誤解。網(wǎng)上很多文章說“FF下等效于innerText屬性的屬性是textContent”————但是事實(shí)上并非如此。innerText與textContent有幾點(diǎn)很重要的不同，導(dǎo)致它們在一些情況下不能直接互換使用。
前些日子寫了個代碼高亮JS插件，在IE下工作完全正常，而在FF下就不對頭。在IE下使用的是innerText屬性，而在FF下使用的則是textContent屬性。在進(jìn)行字符串處理的時候二者的不同導(dǎo)致了完全不一樣的結(jié)果。于是就專門寫了點(diǎn)東西來測試二者的不同。
根據(jù)測試的結(jié)果表明：
innerText：它的內(nèi)容實(shí)際上就是你在瀏覽器看到的內(nèi)容。它的值是經(jīng)過瀏覽器解釋過的結(jié)果：它將元素的innerHTML換碼、解釋，最終顯示出來，然后去除各種格式信息留下的純文本。它會把<br/>換成換行符，會將多個空格并成一個空格對待，而本來的換行符卻并不會引起換行，IE會將其當(dāng)作一個普通的單詞邊界（一般是空格）。再說的形象點(diǎn)，一個元素的innerText屬性的值，和你將這個元素內(nèi)容復(fù)制粘貼到記事本里的內(nèi)容一致。
textContent：它的內(nèi)容則是innerHTML去除所有標(biāo)簽后的內(nèi)容（我懷疑這個是從XMLDOM中照搬過來的屬性，特性完全一致）。它會將innerHTML中的轉(zhuǎn)義字符（<、 什么的）進(jìn)行換碼，但是不對任何html標(biāo)簽進(jìn)行解釋，而是直接剔除它們。它也不會對innerHTML中的文本按照HTML的方式進(jìn)行格式轉(zhuǎn)換，比如多個空格還會原原本本地保留，不會合并為一個空格，換行符仍然存在（相反<br/>卻不會導(dǎo)致?lián)Q行）。
更加簡練的總結(jié)：IE中的innerText是需要對innerHTML的值進(jìn)行：
1、HTML轉(zhuǎn)義（等同于XML轉(zhuǎn)義，對<、&等轉(zhuǎn)義字符進(jìn)行處理）；
2、經(jīng)過HTML解釋和CSS樣式解釋；
3、之后又剔除格式信息
之后留下的純文本。
而FF中的textContent沒有2、3步，在經(jīng)過了HTML轉(zhuǎn)義之后直接剔除所有html標(biāo)簽后得到的純文本。
一個例子：
復(fù)制代碼 代碼如下:
<div id=”T1″>
ABCD
EFG HIJ<br/>KLM N
OPQ<div>RS</div>T
T
<div>
這個id為T1的div，
在IE中的innerText屬性的值為：
復(fù)制代碼 代碼如下:
ABCD EFG HIJ
KLM N OPQ
RS
T T
而在FF中的textContent的屬性的值為：
復(fù)制代碼 代碼如下:
(這里有個換行)
ABCD
EFG HIJKLM N
OPQRST
T
注意那個div中還嵌套了個div，而這個更能反映IE的innerText和FF的textContent各自的處理方式的不同：
div是塊（block）元素，默認(rèn)會獨(dú)占一行，因此，在IE中的innerText反映為上述div中的RS獨(dú)占一行，而FF的textContent完全不理會HTML格式，因此其textContent中的RS是和其它字符連在一起的，不會獨(dú)占一行。
如果想更進(jìn)一步，看看這個有趣的結(jié)果：
假如給里面那個div加一個style=”float:left;”，那么這個div就會由塊元素變化為行元素，不再獨(dú)占一行，因此IE的innerText屬性中RS便不再獨(dú)占一行，而與其它字符連在一起，而在FF中由于textContent不理會標(biāo)簽更不會理會CSS，因此它的textContent屬性的值不會有任何變化。
這么看來，很多網(wǎng)上說的“讓FF支持innerText屬性”云云，其實(shí)都是多多少少有問題的。要實(shí)現(xiàn)IE的innerText，遠(yuǎn)沒有想象中的那么簡單，你若要使用JavaScript讓FF擁有和innerText完全一樣的效果，得自己把html標(biāo)簽屬性全部parse一遍，解釋它們，甚至還需要去解釋css……
（不過根據(jù)原理，貌似通過剪貼板的復(fù)制和取回操作可以在FF下模擬innerText效果（這個未測試），但是1有副作用，2FF下的剪貼板操作也很麻煩。）
不過還好，大多數(shù)時候我們并不需要那么精確，使用innerHTML做點(diǎn)簡單的處理即可達(dá)到比較接近的效果了。
注：以上代碼均在IE6和FF3下完成測試。
相關(guān)文章
用js實(shí)現(xiàn)圖片旋轉(zhuǎn)的兩種方案
這篇文章主要給大家介紹了關(guān)于用js實(shí)現(xiàn)圖片旋轉(zhuǎn)的兩種方案, 旋轉(zhuǎn)的效果就是根據(jù)鼠標(biāo)的的移動距離來顯示不同的圖片,形成視覺差,仿佛就是在正真的旋轉(zhuǎn),需要的朋友可以參考下2023-07-07
獲取url上的某個參數(shù)的方法有很多，在本文為大家介紹下使用javascript是如何實(shí)現(xiàn)的，感興趣的朋友不要錯過2013-11-11
這篇文章主要為大家介紹了微信小程序事件綁定傳參冒泡及捕獲的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
JS實(shí)現(xiàn)控制圖片顯示大小的方法【圖片等比例縮放功能】
這篇文章主要介紹了JS實(shí)現(xiàn)控制圖片顯示大小的方法,即實(shí)現(xiàn)圖片等比例縮放功能,涉及JS動態(tài)操作頁面元素屬性相關(guān)技巧,需要的朋友可以參考下2017-02-02
js/jquery解析json和數(shù)組格式的方法詳解
本篇文章主要是對js/jquery解析json和數(shù)組格式的方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了JS保留兩位小數(shù) 四舍五入函數(shù)的小例子，有需要的朋友可以參考一下2013-11-11
這篇文章主要介紹了Iframe如何自動適應(yīng)頁面的高度,需要的朋友可以參考下2014-02-02
這篇文章主要介紹了微信小程序 Storage更新詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
做過微信開發(fā)的都知道，在部分android機(jī)型里微信不支持網(wǎng)頁上傳圖片的，這是由于這些機(jī)型的文件上傳存在內(nèi)存泄漏，會導(dǎo)致微信閃退，所以微信內(nèi)置瀏覽器將文件上傳屏蔽，本篇文章給大家介紹使用微信jssdk如何上傳圖片，需要的朋友可以關(guān)注下2015-08-08
這篇文章主要介紹了JavaScript構(gòu)建自己的模板小引擎,結(jié)合實(shí)例形式分析了javascript自定義模板引擎的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2018-12-12