跟大家講解下有關innerText和textContent之間的差異，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說innerText和textContent之間的差異，小編也收集到了有關innerText和textContent之間的差異的相關資料，希望大家看到了會喜歡。

innerText和textContent很多人會困惑，因為都可以用來獲取文本內容，實際上，兩者還是有很多區別的，本文就將介紹這兩個屬性的異同，希望可以對大家的學習有所幫助。

一、之前錯誤的認識

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和textContent表現出了不同，眼見為實，您可以狠狠地點擊這里：innerText和textContent區別對比demo

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

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

例如，我們設置呈現結果的父元素white-space:pre，則會出現下圖所示的效果：

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

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

已知有下面一段HTML：

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

此時，我們顯示dom2.innerText和dom2.textContent的返回值，也會看出區別，如下圖所示：

可以看到，display:none元素是無法使用innerText獲取的，但是textContent卻可以，無論元素隱藏與否。

您可以狠狠地點擊這里：innerText和textContent區別對比demo

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

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

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

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

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

三、最后的結論

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

var text = dom.textContent;

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

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

四、三言兩語的結語

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

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

好了，就說這么多，一個小小的研究，希望能夠對大家的學習有所幫助。

原文地址：https://www.zhangxinxu.com/wordpress/?p=8941

本文來自 js教程 欄目，歡迎學習！

以上就是innerText和textContent之間的差異的詳細內容，更多請關注php中文網其它相關文章！

來源：php中文網