首頁  >  文章  >  web前端  >  innerText與textContent的差異

innerText與textContent的差異

小云云
小云云轉載
2018-01-16 11:15:032878瀏覽

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

innerText與textContent的差異

一、先前錯誤的認知

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

innerText與textContent的差異

而textContent IE9瀏覽器才開始支援:

innerText與textContent的差異

由於存在相容性,因此在開發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></span>元素裡面的點點點...和前面的文字內容是緊密連接在一起的,前後沒有任何空格。

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

如下截圖所示:

innerText與textContent的差異

innerTexttextContent表現出了不同,眼見為實,您可以狠狠地點擊這裡:innerText和textContent區別對比demo

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

其實是innerText會保留區塊級元素的換行特性,以換行符號呈現。在HTML中,如果white-space不是prepre-wrap則會表現為空格。也就是下圖中的空格其實是換行符:

innerText與textContent的差異

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

innerText與textContent的差異

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

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

已知有下面一段HTML:

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

此時,我們顯示dom2.innerTextdom2.textContent的傳回值,也會看出差別,如下圖:

innerText與textContent的差異

##可以看到,

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

您可以狠狠地點選這裡:

innerText與textContent區別對比demo

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

此外,由于innerText属性值的获取会考虑CSS样式,因此读取innerText的值将触发回流以确保计算出的样式是最新的,而回流在计算上很昂贵,会降低性能,因此应尽可能避免回流。而textContent只是单纯读取文本内容,因此性能更高。

4. IE浏览器不符合上面规则

但是在IE浏览器下,innerText的表现和规范是不符的,最终表现为textContent属性一样的效果,也就是没有空格,也不会不显示隐藏元素,例如下面IE11下的效果截图:

innerText與textContent的差異

另外,与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中文網其他相關文章!

陳述:
本文轉載於:zhangxinxu.com。如有侵權,請聯絡admin@php.cn刪除