Difference between innerText and textContent

Many people are confused about innerText and textContent, because both can be used to obtain text content. In fact, there are still many differences between the two. This article will introduce the similarities and differences of these two properties, hoping it can help everyone's learning. help.

1. Previous wrong understanding

innerText IE6 started to support it. At that time , Firefox browser does not support this API, and it was not supported until Firefox 45+ in March 2016.

The textContent IE9 browser has only begun to support:

Due to compatibility, we are developing PC projects When obtaining the text content of an element, the following statement is used:

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

Over time, it is mistakenly believed that innerText and textContent have the same function.

A recent practice suddenly made me realize, mother, it turns out there is a difference between innerText and textContent. This difference is easy for newbies to know (because they will wonder why there are two APIs), and I am like this The uncle who was deeply affected by the compatibility issue didn't notice it (thinking that IE's text acquisition API and Firefox's text acquisition API support each other).

What is the difference? Let's see a few examples.

2. The difference between innerText and textContent

One of the differences is that the calling object is different. innerText can only be called on HTML elements, but textContent can be called on any Node node: HTMLElement.innerText and Node.textContent.

The second difference is that the

value acquisition rules are different.

1. Rule differences between block-level elements and line breaks

It is known that there is the following piece of HTML:

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

The real-time effect is as follows:

一段文字内容…

You can see that the dots and dots in the

element with position:absolute set... are closely connected to the previous text content, before and after without any spaces.

However, when we obtain the

innerText and textContent## of the <p></p> element respectively with id="dom" When the # value was reached, something interesting happened. The return value of innerText actually had a space in front of the dot. As shown in the screenshot below:

<p></p>

innerText

and textContent show differences, seeing is believing, You can click here: InnerText and textContent difference comparison demo Why is there such a difference?

In fact,

innerText

will retain the line wrapping characteristics of block-level elements and present them in the form of line breaks. In HTML, if white-space is not pre or pre-wrap, it will appear as a space. That is to say, the spaces in the picture below are actually line breaks:

For example, if we set the parent element to render the result

white-space:pre

, then The effect shown in the figure below will appear:

In this example, although the

element is an inline element, due to the position:absolute makes its display calculated value become block. Therefore, although there is no line break visually, when innerText is obtained Line breaks still occur, resulting in spaces.

2. Rule differences regarding whether to obtain hidden elements

It is known that there is the following piece of HTML:

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

At this time, we display ## The difference will also be seen in the

return values ​​of #dom2.innerText

and dom2.textContent, as shown in the figure below:

can be seen , display:none

elements cannot be obtained using

innerText, but textContent can, regardless of whether the element is hidden or not. You can click here: InnerText and textContent difference comparison demo

3. Rule differences in performance and reflow

<p></p>

此外，由于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教程 栏目，欢迎学习！

The above is the detailed content of Difference between innerText and textContent. For more information, please follow other related articles on the PHP Chinese website!