Analysis of similarities and differences between javascript textContent and innerText

Analysis of similarities and differences between javascript textContent and innerText_javascript skills

WBOY

Release： 2016-05-16 18:18:05

Original

1132 people have browsed it

The difference between textContent and innerText

There is an innerText attribute under IE and a textContent attribute under FF. Many people who used to write scripts for IE could not find the innerText attribute under FF, so the suggestion found on the Internet was to use textContent instead. The same goes for those who write scripts for FF.

But actually, there is a misunderstanding here. Many articles on the Internet say that "the attribute equivalent to the innerText attribute under FF is textContent" - but in fact this is not the case. There are several important differences between innerText and textContent, which prevents them from being used directly interchangeably in some cases.

I wrote a code highlighting JS plug-in a few days ago. It works perfectly under IE, but not properly under FF. Under IE, the innerText attribute is used, while under FF, the textContent attribute is used. The difference between the two leads to completely different results when processing strings. So I wrote something specifically to test the difference between the two.

According to the test results:
innerText: Its content is actually what you see in the browser. Its value is the result of interpretation by the browser: it escapes, interprets, and finally displays the innerHTML of the element, and then removes the plain text left behind by various formatting information. It will replace
with a newline character, and will treat multiple spaces into one space. However, the original newline character will not cause a newline, and IE will treat it as an ordinary word boundary (generally is a space). To put it more graphically, the value of the innerText attribute of an element is consistent with the content when you copy and paste the content of this element into Notepad.

textContent: Its content is the content of innerHTML after removing all tags (I suspect this is an attribute copied from XMLDOM, and the characteristics are exactly the same). It will escape the escape characters (<, etc.) in innerHTML, but it will not interpret any html tags, but directly remove them. It will also not format the text in innerHTML according to HTML. For example, multiple spaces will remain intact and will not be merged into one space. Line breaks will still exist (on the contrary,
will not cause newline).

A more concise summary: innerText in IE requires the value of innerHTML:
1. HTML escaping (equivalent to XML escaping, processing escape characters such as <, &) ;
2. After HTML interpretation and CSS style interpretation;
3. Then the plain text left after removing the format information
.
The textContent in FF does not have steps 2 and 3. After HTML escaping, all html tags are directly removed and the resulting plain text is obtained.

An example:

Copy code The code is as follows:

This div with the ID of T1,
The value of the innerText attribute in IE is:

Copy code

The code is as follows: ABCD EFG HIJ KLM N OPQ RS T T

And the value of the textContent attribute in FF Copy the code for:

The code is as follows: (There is a line break here) ABCD EFG HIJKLM N OPQRST

Note that there is a div nested in that div, and this better reflects the difference in the processing methods of IE's innerText and FF's textContent: 
div is a block element and will occupy one line by default, so , the innerText in IE reflects that the RS in the above div occupies an exclusive line, while FF's textContent completely ignores the HTML format, so the RS in its textContent is connected with other characters and does not occupy an exclusive line. 

If you want to go further, take a look at this interesting result: 
If you add a style="float:left;" to the div inside, then the div will change from a block element to a row element. No longer occupies an exclusive line, so the RS in IE's innerText attribute no longer occupies an exclusive line, but is connected with other characters. In FF, since textContent ignores labels and does not care about CSS, the value of its textContent attribute will not any changes. 

It seems that many online talks about "let FF support the innerText attribute" are actually more or less problematic. Implementing IE's innerText is far from as simple as imagined. If you want to use JavaScript to make FF have exactly the same effect as innerText, you have to parse all the html tag attributes yourself, explain them, and even need to explain the css... 
(However, according to the principle, it seems that the innerText effect can be simulated under FF through the copy and retrieval operations of the clipboard (this has not been tested), but 1 has side effects, and the clipboard operation under 2FF is also very troublesome.) 
 
But fortunately, most of the time we don’t need to be so precise. We can achieve a closer effect by using innerHTML to do some simple processing. 

Note: The above code was tested under IE6 and FF3.