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 innerTextand the textContenteffect is the same.
The latest practice suddenly made me discover, mother, there is a difference between the original innerTextand 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:absoluteof <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.innerTexttextContentinnerText
As shown in the screenshot below:
innerTextIt’s textContentdifferent 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-spaceis not preor pre-wrapit 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:absolutemake its displaycalculated value become block. Therefore, although there is no line break visually, line innerTextbreaks 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.innerTextand dom2.textContenta return value, the difference will be seen that, as shown below:
As you can see, the display:noneelement cannot be innerTextaccessed, but textContentit 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 innerTextthe acquisition of the attribute value will consider the CSS style, the read innerTextvalue 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 textContentjust simply reads the text content, so the performance is higher.
4. IE browser does not meet the above rules
However, under IE browser, innerTextthe performance is not consistent with the specification, and the final performance is the textContentsame 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 textContentin Internet Explorer (version 11 and below), changes innerTextwill 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
innerTextDue 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 textContentobtain 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 innerTextcontains so many details. InnerHTML is a high-frequency use attribute. I didn't expect that it would innerTexthave such a story, and its status was textContentreplaced, 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.