1. The previous wrong understanding
innerText started to support IE6. At that time, the Firefox browser did not support this API. It was not supported until Firefox 45+ in March 2016.
The textContent
IE9 browser only started to support:
Due to compatibility, the text content of elements obtained when developing PC-side projects is the following statement:
var text = dom.innerText || dom.textContent;
Over time, I mistakenly believe that innerText
and the textContent
effect is the same.
The latest practice suddenly made me discover, mother, there is a difference between the original innerText
and the original textContent
. This difference is easy for Xiao Mengxin to know (because I wonder why there are two APIs), and my uncle who is deeply affected by compatibility issues Instead, I didn’t notice it (thought that IE’s text retrieval API and Firefox’s text retrieval API support each other).
What is the difference? Let's see a few examples.
Two, the difference between innerText and textContent
Different one, the calling object is different . innerText can only be called by HTML elements, but any Node node for textContent can be used: HTMLElement.innerText and Node.textContent.
The second difference is that the value acquisition rules are different .
1. Block-level elements and line breaks of rule differences
The following piece of HTML is known:
<p id="dom">一段文字内容<span style="position:absolute;">...</span></p>
The real-time effects are as follows:
A piece of text...
We can see a set position:absolute
of <span>
little point elements inside ...
and in front of the text are closely linked together, without any spaces before and after.
However, when we obtained id="dom"
the sum values of the <p>
elements separately , something interesting happened. The return value actually had a space before the dot dot.innerText
textContent
innerText
As shown in the screenshot below:
innerText
It’s textContent
different from showing, seeing is believing, you can click here fiercely: innerText and textContent difference comparison demo
Why is there such a difference?
In fact innerText
, the newline characteristics of block-level elements are retained and presented in the form of newline characters. In HTML, if it white-space
is not pre
or pre-wrap
it will appear as a space. That is, the spaces in the figure below are actually line breaks:
For example, if we set the parent element of the rendering result white-space:pre
, the effect shown in the following figure will appear:
In this example, although the <span>
element is an inline element, it has been set to position:absolute
make its display
calculated value become block
. Therefore, although there is no line break visually, line innerText
breaks are still generated when obtaining, resulting in spaces.
2. Whether the hidden elements of the rule difference are obtained or not
The following piece of HTML is known:
<p id="dom2">There is a hidden text <span hidden> behind me, this is me! </span></p>
In this case, we show dom2.innerText
and dom2.textContent
a return value, the difference will be seen that, as shown below:
As you can see, the display:none
element cannot be innerText
accessed, but textContent
it can, regardless of whether the element is hidden or not.
You can click here: demo of the difference between innerText and textContent
3. The performance and reflow of the difference in rules
In addition, since innerText
the acquisition of the attribute value will consider the CSS style, the read innerText
value will trigger a reflow to ensure that the calculated style is the latest. Reflow is computationally expensive and will reduce performance, so reflux should be avoided as much as possible. It textContent
just simply reads the text content, so the performance is higher.
4. IE browser does not meet the above rules
However, under IE browser, innerText
the performance is not consistent with the specification, and the final performance is the textContent
same as the attribute, that is, there are no spaces and hidden elements are not displayed. For example, the following screenshot of the effect under IE11:
In addition, unlike textContent
in Internet Explorer (version 11 and below), changes innerText
will remove child nodes from the element and permanently destroy all child text nodes. It is no longer possible to insert nodes into any other element or the same element.
Three, the final conclusion
innerText
Due to many special features, compatibility differences, performance issues, and consideration of actual development needs, it is not recommended to use it, and it is recommended to use to textContent
obtain text content.
var text = dom.textContent;
If your project needs to be compatible with IE8 browser, use the following code:
var text = dom.textContent || dom.innerText;
Four, a few words of conclusion
Unexpectedly, it innerText
contains so many details. InnerHTML is a high-frequency use attribute. I didn't expect that it would innerText
have such a story, and its status was textContent
replaced, just like the story in a novel, it is always unexpected.
In addition, if you want to change the text content in a DOM element, it is recommended textContent
, not innerHTML
, the performance will be higher.
Well, just say so much, a small research, I hope it can be helpful to everyone's study.