The difference between textcontent and innertext
There is a innertext property under IE, FF has a textcontent attribute. Many of the former to write to IE script, in the FF can not find the innertext attribute, so the internet found the suggestion is to use textcontent to replace. The same is the case for the FF script.
But actually, there's a misunderstanding here. Many articles on the web say that "FF is equivalent to innertext property is Textcontent" ———— but in fact it is not. There are several important differences between innertext and Textcontent, which in some cases cannot be used interchangeably.
Some days ago wrote a code to highlight the JS plug-in, in IE work completely normal, and in the FF under the wrong. The innertext attribute is used under IE, and the Textcontent property is used under the FF. The difference in string processing results in a completely different result. So I wrote something specifically to test the difference.
According to the test results:
InnerText: Its content is actually what you see in the browser. Its value is a browser-explained result: it will change the elements of the innerHTML, interpretation, the final display, and then remove all the formatting information left by the plain text. It will replace <br/> with a newline character, will be a number of spaces and a space to treat, but the original line break will not cause the line, IE will be treated as a common word boundary (usually a space). Again, the image point, the value of an element's innertext attribute, is consistent with the content you copy and paste into Notepad.
Textcontent: Its content is innerhtml remove all tags after the content (I suspect this is copied from the XMLDOM properties, the characteristics of the exact same). It will change the escape characters (<, whatever) in the innerHTML, but do not interpret any HTML tags, but instead remove them directly. It also does not format text in innerHTML as HTML, such as multiple spaces that are kept as they are, are not merged into a single space, and line breaks still exist (on the contrary <br/> do not cause a newline).
A more concise summary: The innertext in IE is required for the value of innerHTML:
1, HTML Escape (equivalent to XML Escape, <, & and other escape characters processing);
2, after the HTML explanation and CSS style interpretation;
3, and then eliminate the format information
After leaving the plain text.
The textcontent in FF does not have 2 or 3 steps, and the plain text that is obtained after the HTML escape is directly removed from all HTML tags.
An example:
Copy Code code as follows:
<div id= "t1″>
Abcd
EFG HIJ<BR/>KLM N
Opq<div>rs</div>t
T
<div>
This ID is T1 Div,
The value of the InnerText property in IE is:
Copy Code code as follows:
ABCD EFG HIJ
KLM N OPQ
Rs
T T
The value of the Textcontent property in FF is:
Copy Code code as follows:
(There's a line change)
Abcd
EFG HIJKLM N
Opqrst
T
Note that the DIV also has a nested div, which is more reflective of IE's innertext and FF textcontent different ways of handling each:
Div is a block element, the default is exclusive line, therefore, in IE innertext reflected in the above Div in the RS exclusive line, and FF textcontent completely ignore HTML format, Therefore, the RS in its textcontent are fonts with other characters and do not monopolize the line.
If you want to go further, take a look at this interesting result:
If the inside that div plus a style= "Float:left", then this div will change from block elements to row elements, no longer exclusive line, so the IE innertext attribute in RS is no longer exclusive line, and other words fonts together, And in the FF because Textcontent ignores the label to ignore the CSS, therefore its textcontent attribute's value does not have any change.
So, a lot of online said "Let FF support innertext attribute" and so on, in fact, are more or less problematic. To achieve the innertext of IE, far from the imagination of so simple, you want to use JavaScript to let FF have and innertext exactly the same effect, have to own HTML tag attributes all parse, explain them, even need to explain CSS ...
(But according to the principle, seemingly through the clipboard copy and retrieve operations can simulate the innertext effect under FF (this is not tested), but 1 has side effects, the 2FF clipboard operation is also troublesome. ）
But fortunately, most of the time we do not need to be so accurate, using innerHTML to do a little bit of processing to achieve a relatively close effect.
Note: The above code is under IE6 and FF3 to complete the test.
