JS Magic Hall: Bad innerHTML, InnerText, Textcontent, and Value properties

First, preface

Since innertext is not a standard property, we cannot use it in Firefox, and we can generally use textcontent instead, but can it be exactly the same? Is it still weird in the form elements of the pit daddy (such as input, textarea, etc.)? The text will record some of the results of the experiment to avoid being played badly later.

Second, InnerHTML

Since both innertext and textcontent are processed differently for innerhtml content, we need to define the characteristics of the innerHTML attribute first.

assignment Operation: The value content is first pattern-matched, then the processed value is assigned to the innerHTML property.

Pattern matching results will result in the retention and conversion of characters to two operations of the HTML entity .

A). The following conditions will be retained

1. Entity names or entity numbers for HTML entities (ASCII entities, symbol entities, and character entities);

2. The characters corresponding to the symbol entity and the character entity;

3. There are no characters corresponding to the HTML entity.

b). The following conditions will be performed to convert characters to HTML entities

1. The characters corresponding to the ASCII entity (<, >, &, ' and ').

That is, in addition to the <, >, &,' and ' will be converted to the entity name, the value will be given to the innerHTML property intact.

value Operation : Gets the innerHTML property value directly.

The following innertext and textcontent content will be used as an experimental raw material in the HTML markup below

<style type="Text/css">. Line3,. line4{float: Left;} . line5::after{Content:"Test" }</style><div id="View"> <div>line1</div> <div>line2</div><br/> <divclass="Line3">line3</div> <divclass="line4">line4</div> <div style="Clear:both;"></div> <divclass="Line5">line5</div></div><script type="Text/javascript">varView = document.getElementById ('View')</script>

Second, InnerText

browser support : IE, Chrome

Assignment Action : first convert the ASCII entity corresponding character (<, >, &, ' and ') to the entity name, and then assign the processed value to the innerHTML property.

value Operation : The value of InnerText is actually a series of processing of innerHTML property values, and then return, the following steps

1. Parsing the HTML tags;

2. The CSS style with limited parsing and rendering;

3. Convert the ASCII entity to the corresponding character;

4. Reject the format information (such as \ T, \ r, \ n, etc.) and combine multiple contiguous spaces into one.

Each version of IE and Chrome under the innertext to perform the above 4 steps, but the effect is different. The experimental results are as follows:

Ie5.5~8

Page Display effect:

Line1line2line3line4line5

InnerText Value Result:

"Line1line2line3line4line5"

Incomplete Summary: pseudo-elements and clear:both are not supported in CSS-style rendering.

Ie9~11

Page Display effect:

Line1line2line3line4line5test

InnerText Value Result:

"Line1line2line3line4line5"

Incomplete Summary: When you make CSS style rendering, only the default style of the element is applied.

Chrome

Page Display effect:

Line1line2line3line4line5test

InnerText Value Result:

"Line1line2line3line4line5"

Incomplete summary: Pseudo-elements are not supported when CSS style rendering is in progress.

Third, textcontent

browser support : ie9~11, Fireforx, Chrome

Assignment Action : first convert the ASCII entity corresponding character (<, >, &, ' and ') to the entity name, and then assign the processed value to the innerHTML property.

value Operation : The value of Textcontent is actually a series of processing of innerHTML property values, and then return, the following steps

1. Remove the HTML tag;

2. Convert the ASCII entity to the appropriate character.

Note:

a). The HTML tag is excluded from parsing, and there is no processing of CSS parsing and rendering, so elements such as <br/> are not effective.

b). No formatting information is removed and consecutive spaces are merged, so \ T, \ r, \ n, and contiguous spaces will take effect.

All browser effects Unified, interface effect:

Line1line2line3line4line5test

Textcontent Value Result:

"   line1  line2  line3  line4  line5"

Iv. innerHTML, InnerText, textcontent, and value in form elements

Here you should have a certain understanding of the relationship and behavior between innerHTML, InnerText and textcontent, but unfortunately the form elements will continue to overturn our previous understanding. Note that the above relationship and behavior is limited to non-form elements, and this section describes the egg pains associated with table cell textarea and input[type= "text").

Pre-message: The Value property of textarea and input[type= "text"] corresponds to the interface input box, and the Value property is assigned to the same operation as entering a value in the interface input box.

TextArea

FireFox

a). innerHTML can be set and effective, affecting other properties:

1. Unconditional impact on the value of textcontent;

2. The value of value is affected before it is assigned by the Value property;

3. After assigning a value through the Value property, the value is not innerhtml-independent.

b). Textcontent can be set and in effect for other properties:

1. Unconditional impact on the value of innerHTML;

2. The value of value is affected before it is assigned by the Value property;

3. After assigning a value through the Value property, the value is not textcontent-independent.

c). Value can be set and effective.

Chrome

a). innerHTML can be set and effective, affecting other properties:

1. Unconditionally affect the value of innertext and textcontent;

2. The value of value is affected before it is assigned by the Value property;

3. After assigning a value through the Value property, the value is not innerhtml-independent.

b). InnerText can be set and effective, affecting other properties:

1. Unconditionally affect the value of innerHTML and textcontent;

2. The value of value is affected before it is assigned by the Value property;

3. After assigning a value through the Value property, the value is not innertext-independent.

c). Textcontent can be set and in effect for other properties:

1. Unconditionally affect the value of innerHTML and innertext;

2. The value of value is affected before it is assigned by the Value property;

3. After assigning a value through the Value property, the value is not textcontent-independent.

d). Value can be set and effective.

Ie9~11

InnerHTML, value, innertext, and textcontent can all be set and valid, unconditionally affecting each other.

Ie5.5~8

InnerHTML, value, innertext, and textcontent can all be set and valid, unconditionally affecting each other.

input[type= "text"]

FireFox

a). innerHTML can be set and effective, unconditionally affecting the value of innertext and textcontent, but does not affect value.

b). Textcontent can be set and in effect, which unconditionally affects the value of innerHTML, but does not affect value.

c). Value can be set and effective without affecting the values of innerHTML and textcontent.

Chrome

a). innerHTML can be set but not valid, the property value will always remain empty string.

b). Textcontent can be set and in effect, but will not affect value, innerHTML, and innertext values.

c). InnerText can be set, but will throw an exception when actually set

<input type="text"Id="Target"><script type="Text/javascript">varGetDesc = function () {returnObject.getOwnPropertyDescriptor.apply (Object, arguments)},Get= function () {returndocument.getElementById.apply (docuemnt, arguments)}vartarget =Get('Target'); Console.log (GetDesc (Target,'InnerText'))//Object {value: "", Writable:true, Enumerable:true, configurable:true}Target.innertext ="1" //nomodificationallowederror:failed to set the ' InnerText ' in ' htmlelement ': the ' input ' element does not sup Port text insertion.</scr

d). Value can be set and effective, but will not affect Textcontent, innerHTML, and innertext values.

Ie5.5~8

a). innerHTML can be set, but will throw an exception when actually set

<input type="text"Id="Target"><script type="Text/javascript">varGetDesc = function () {returnObject.getOwnPropertyDescriptor.apply (Object, arguments)},Get= function () {returndocument.getElementById.apply (docuemnt, arguments)}vartarget =Get('Target'); Console.log (GetDesc (Target,'InnerHTML'))//Object {value: "", Writable:true, Enumerable:true, configurable:true}Target.innertext ="1" //Unknown run-time error</script>

b). InnerText can be set and valid to affect value values unconditionally. However, the value of innertext is always an empty string.

c). Value can be set and effective, but does not affect innerHTML and innertext values.

Ie9~11

a). innerHTML can be set and effective, unconditionally affecting the value of innertext and textcontent. But does not affect the value.

b). InnerText can be set and effective, unconditionally affecting value values. But does not affect innerHTML and textcontent. The value of the innertext is returned by processing the property value of innerHTML.

// Suppose A is input[type= "text"] " < "  "test"//  &lt; // Test // <

c). Textcontent can be set and in effect, the value of innerHTML and innertext is unconditionally affected, and the value of Textcontent is returned by the value of the innerHTML property.

d). Value can be set and effective, but will not affect innerHTML, textcontent, and innertext values.

Five, HTML encoding

The so-called HTML encoding is actually converting characters into HTML entities, which is one of the important ways to prevent script injection.

Because the value of the form element and the innerHTML relationship behave differently on different browsers, the safest way is to

;(function (exports, doc) {varDom = Doc.createelement ('textarea') Exports.encode=function (raw) {dom.innerhtml=Rawreturndom.innerhtml} exports.decode=function (str) {dom.innerhtml=Strreturndom['InnerText' inchDom?'InnerText':'textcontent']}} (Window.htmlencoder= {}, document))

Vi. Summary

If there is a mistake in this article, please add, thank you!

Respect the original, reprint please indicate from: http://www.cnblogs.com/fsjohnhuang/p/4319635.html ^_^ Fat Boy John

JS Magic Hall: Bad innerHTML, InnerText, Textcontent, and Value properties