Detailed introduction to the difference between property and attribute in JavaScript_Basic knowledge

1. Definition

Property: Attribute. All HTML elements are represented by the HTMLElement type. The HTMLElement type directly inherits from Element and adds some attributes. These added attributes correspond to the following five standard characteristics of each HTML element: id, title, lang, dir, className. A DOM node is an object, so it can add custom properties and methods like other JavaScript objects. The value of property can be any data type and is case-sensitive. Custom properties will not appear in html code, but only exist in js.

Attribute: Attribute, different from property, attribute can only be a string, case-insensitive, appears in innerHTML, all attributes can be listed through the class array attributes.

2. Similarities

Standard DOM properties and attributes are synchronized. Recognized (non-custom) properties are added to DOM objects in the form of attributes. For example, id, align, style, etc. At this time, you can operate the property or use the DOM method of operating characteristics such as getAttribute() to operate the attribute. However, the attribute name passed to getAttribute() is the same as the actual attribute name. Therefore, "class" must be passed in when obtaining the attribute value of class.

3. Differences

1). For some standard feature operations, there are differences in the values ​​obtained by getAttribute and the dot (.). Such as href, src, value, style, onclick and other event handlers.
2).href: getAttribute gets the actual value of href, while the dot gets the complete url, so there are browser differences.

Copy code The code is as follows:

<script><br>       var a = document.body.children[0]<br> a.href = '/'<br> alert( 'attribute:' a.getAttribute('href') ) // '/'<br> alert( 'property:' a.href ) // IE: '/', others: full URL<br> </script>

Getting the value of src is similar to href, but IE will also return the full URL;
The value also has some built-in properties for 'one-way' synchronization.
For example, input.value is synchronized from attribute (i.e. property is synchronized from attribute)

Copy code The code is as follows:

<script><br>       var input = document.body.children[0];<br> ​​​​ input.setAttribute('value', 'new');<br> alert( input.value ); // 'new', input.value changed<br> alert( input.getAtrribute(value) ); // 'new'<br> </script>

But attribute cannot be synchronized from property:

Copy code The code is as follows:

<script><br>         var input = document.body.children[0];<br> ​​​​ input.value = 'new';<br> alert(input.getAttribute('value')); // 'markup', not changed!<br> </script>

getAttribute gets the initial value, while the dot gets the initial value or the modified value of .value. For example, when the visitor enters certain characters, the 'value' attribute maintains the original value after the property is updated. The original value can be used to check whether the input has changed, or to reset it.

For event handlers such as style and onclick, the getAttribute method will return a string when accessed, and the dot returns the corresponding object and event handling function.

For the checked attribute in input

Copy code The code is as follows:

<script><br> var input = document.body.children[0]<br> alert( input.checked ) // true<br> alert( input.getAttribute('checked') ) // empty string<br> </script>

getAttribute gets the value you actually set. The dot returns a Boolean value.

Differences in browser compatibility

1. In IE 2. IE

Copy code The code is as follows:

document.body.abba = 1 // assign property (now can read it by getAttribute)
document.body.ABBA = 5 // assign property with another case
// must get a property named 'ABba' in case-insensitive way.
alert( document.body.getAttribute('ABba') ) // 1

Prefer property

In actual applications, 98% of DOM operations use properties.
There are only two situations where you need to use attributes

1. Customize HTML attributes because it is not synchronized to DOM properties.
2. Access built-in HTML attributes, which cannot be synchronized from properties. For example, the value of the INPUT tag.