DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript textContent與innerText的異同分析
javascript textContent與innerText的異同分析
編輯:關於JavaScript     
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標簽後得到的純文本。

一個例子:
復制代碼 代碼如下:
<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)元素,默認會獨占一行,因此,在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下完成測試。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved