小tips:JS DOM innerText和textContent的區別

2019-09-17 219 0 編輯:深圳網站開發 來源:互聯網

一、之前錯誤的認識

innerText IE6就開始支持,那個時候,Firefox瀏覽器是不支持這個API的,一直到2016年3月份Firefox 45+才開始支持;而textContent IE9瀏覽器才開始支持。

由于存在兼容性,因此在開發PC端項目的時候獲取元素的文本內容都是下面的語句:

var text = dom.innerText || dom.textContent;

久而久之,就誤認為innerText和textContent作用是一樣的。

最近一次實踐突然讓我發現,娘啊,原來innerText和textContent是有區別的,這種區別小萌新反而容易知道(因為會疑惑為何會有兩個API),而我這樣深受兼容性問題影響的大叔反而注意不到(以為是IE的文本獲取API和Firefox的文本獲取API互相支持)。

究竟區別在哪里呢?我們看幾個例子就知道了。

深圳網站建設

二、innerText和textContent的不同

不同之一,調用對象不同。innerText只有HTML元素才可以調用,但是textContent任意Node節點都可以:HTMLElement.innerText和Node.textContent。

不同之二,值獲取規則不同。

1. 規則差異之塊級元素與換行符

已知有下面一段HTML:

<p id="dom">一段文字內容<span style="position:absolute;">...</span></p>

一段文字內容...

可以看到設置了position:absolute的<span>元素里面的點點點...和前面的文字內容是緊密連接在一起的,前后沒有任何空格。

但是,當我們分別獲取id="dom"的<p>元素的innerText和textContent值的時候,有意思的事情發生了,innerText的返回值居然在點點點前面出現了一個空格。

為什么會有這樣的差異呢?

實際上是innerText會保留塊級元素的換行特性,以換行符形式呈現。在HTML中,如果white-space不是pre或pre-wrap則會表現為空格。

在本例中,雖然<span>元素是內聯元素,但由于設置了position:absolute使其display計算值變成了block,因此,雖然視覺上沒有換行,但innerText獲取的時候依舊產生了換行,導致空格出現。

2. 規則差異之隱藏元素的獲取與否

已知有下面一段HTML:

<p id="dom2">我后面有一段隱藏文字<span hidden>,就是我啦!</span></p>

此時,我們顯示dom2.innerText和dom2.textContent的返回值,也會有區別,display:none元素是無法使用innerText獲取的,但是textContent卻可以,無論元素隱藏與否。

3. 規則差異之性能與回流

此外,由于innerText屬性值的獲取會考慮CSS樣式,因此讀取innerText的值將觸發回流以確保計算出的樣式是最新的,而回流在計算上很昂貴,會降低性能,因此應盡可能避免回流。而textContent只是單純讀取文本內容,因此性能更高。

4. IE瀏覽器不符合上面規則

但是在IE瀏覽器下,innerText的表現和規范是不符的,最終表現為textContent屬性一樣的效果,也就是沒有空格,也不會不顯示隱藏元素。

另外,與textContent不同,在Internet Explorer(版本11及以下)中更改innerText將從元素中移除子節點,并永久銷毀所有子文本節點。不可能再將節點插入任何其他元素或同一元素中。


三、最后的結論

innerText由于存在諸多特別的特性、以及兼容性差異,以及性能方面問題,以及實際開發的需求的考量,不推薦使用,推薦使用textContent獲取文本內容。

var text = dom.textContent;

如果你的項目還需要兼容IE8瀏覽器,則使用下面的代碼:8

var text = dom.textContent || dom.innerText;


四、三言兩語的結語

沒想到innerText包含的細節這么多。innerHTML是高頻使用屬性,沒想到原本以為相對應也會高頻使用的innerText居然這么有故事,地位被textContent取代了,就像小說里的故事一樣,總是出乎意料。

另外,如果你要在一個DOM元素中改變文字內容,推薦使用textContent,而不是innerHTML,性能會更高一點。

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾