innerText和textContent很多人會(huì)困惑，因?yàn)槎伎梢杂脕?lái)獲取文本內(nèi)容，實(shí)際上，兩者還是有很多區(qū)別的，本文就將介紹這兩個(gè)屬性的異同，希望可以對(duì)大家的學(xué)習(xí)有所幫助。

一、之前錯(cuò)誤的認(rèn)識(shí)

innerText IE6就開(kāi)始支持，那個(gè)時(shí)候，Firefox瀏覽器是不支持這個(gè)API的，一直到2016年3月份Firefox 45+才開(kāi)始支持。

而textContent IE9瀏覽器才開(kāi)始支持：

由于存在兼容性，因此在開(kāi)發(fā)PC端項(xiàng)目的時(shí)候獲取元素的文本內(nèi)容都是下面的語(yǔ)句：var text = dom.innerText || dom.textContent;

久而久之，就誤認(rèn)為innerText和textContent作用是一樣的。

最近一次實(shí)踐突然讓我發(fā)現(xiàn)，娘啊，原來(lái)innerText和textContent是有區(qū)別的，這種區(qū)別小萌新反而容易知道(因?yàn)闀?huì)疑惑為何會(huì)有兩個(gè)API)，而我這樣深受兼容性問(wèn)題影響的大叔反而注意不到(以為是IE的文本獲取API和Firefox的文本獲取API互相支持)。

究竟區(qū)別在哪里呢？我們看幾個(gè)例子就知道了。

二、innerText和textContent的不同

不同之一，調(diào)用對(duì)象不同。innerText只有HTML元素才可以調(diào)用，但是textContent任意Node節(jié)點(diǎn)都可以：HTMLElement.innerText和Node.textContent。

不同之二，值獲取規(guī)則不同。

1. 規(guī)則差異之塊級(jí)元素與換行符

已知有下面一段HTML：

一段文字內(nèi)容...

實(shí)時(shí)效果如下：一段文字內(nèi)容…

可以看到設(shè)置了position:absolute的元素里面的點(diǎn)點(diǎn)點(diǎn)...和前面的文字內(nèi)容是緊密連接在一起的，前后沒(méi)有任何空格。

但是，當(dāng)我們分別獲取id="dom"的

元素的innerText和textContent值的時(shí)候，有意思的事情發(fā)生了，innerText的返回值居然在點(diǎn)點(diǎn)點(diǎn)前面出現(xiàn)了一個(gè)空格。

如下截圖所示：

innerText和textContent表現(xiàn)出了不同，眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：innerText和textContent區(qū)別對(duì)比demo

為什么會(huì)有這樣的差異呢？

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

例如，我們?cè)O(shè)置呈現(xiàn)結(jié)果的父元素white-space:pre，則會(huì)出現(xiàn)下圖所示的效果：

在本例中，雖然元素是內(nèi)聯(lián)元素，但由于設(shè)置了position:absolute使其display計(jì)算值變成了block，因此，雖然視覺(jué)上沒(méi)有換行，但innerText獲取的時(shí)候依舊產(chǎn)生了換行，導(dǎo)致空格出現(xiàn)。

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

已知有下面一段HTML：

我后面有一段隱藏文字，就是我啦！

此時(shí)，我們顯示dom2.innerText和dom2.textContent的返回值，也會(huì)看出區(qū)別，如下圖所示：

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

3. 規(guī)則差異之性能與回流

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

4. IE瀏覽器不符合上面規(guī)則

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

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

三、最后的結(jié)論

innerText由于存在諸多特別的特性、以及兼容性差異，以及性能方面問(wèn)題，以及實(shí)際開(kāi)發(fā)的需求的考量，不推薦使用，推薦使用textContent獲取文本內(nèi)容。var text = dom.textContent;

如果你的項(xiàng)目還需要兼容IE8瀏覽器，則使用下面的代碼：var text = dom.textContent || dom.innerText;

四、三言兩語(yǔ)的結(jié)語(yǔ)

沒(méi)想到innerText包含的細(xì)節(jié)這么多。innerHTML是高頻使用屬性，沒(méi)想到原本以為相對(duì)應(yīng)也會(huì)高頻使用的innerText居然這么有故事，地位被textContent取代了，就像小說(shuō)里的故事一樣，總是出乎意料。

另外，如果你要在一個(gè)DOM元素中改變文字內(nèi)容，推薦使用textContent，而不是innerHTML，性能會(huì)更高一點(diǎn)。

好了，就說(shuō)這么多，一個(gè)小小的研究，希望能夠?qū)Υ蠹业膶W(xué)習(xí)有所幫助。

總結(jié)

以上是生活随笔為你收集整理的js text 和 html,JS DOM innerText和textContent的区别的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。