1. Definition
Property: Property, all HTML elements are represented by the HTMLElement type. The HTMLElement type directly inherits from Element and adds some attributes. The added attributes correspond to each HTML element with the following 5 standard characteristics: 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 the property can be any data type, which is case sensitive, and the custom property will not appear in the html code, but only exists in js.
Attribute: Feature, different from property, attribute can only be a string, case-insensitive, appears in innerHTML, and all attributes can be listed through class array attributes.
2. Similarities
Standard DOM properties are synchronized with attributes. A recognized (non-custom) attribute is added to the DOM object as a property. For example, id, align, style, etc., at this time, the properties can be operated by operating property or DOM methods such as getAttribute() that use operation characteristics. However, the attribute name passed to getAttribute() is the same as the actual attribute name. Therefore, when obtaining the characteristic value of the class, you must pass in "class".
3. Differences
1). For some standard characteristics, there is a difference in the values obtained by getAttribute and point (.). Such as href, src, value, style, onclick and other event handlers.
2).href: getAttribute gets the actual value of href, while dots get the complete url, which has a browser difference.
The code copy is as follows:
<script>
var a = document.body.children[0]
a.href = '/'
alert( 'attribute:' + a.getAttribute('href') ) // '/'
alert( 'property:' + a.href ) // IE: '/', others: full URL
</script>
The value of src is similar to href, but IE will also return a full URL;
The value value also has some built-in properties for 'one-way' (one-way) synchronization.
For example, input.value synchronizes from attribute (i.e. property gets synchronization from attribute)
The code copy is as follows:
<input type="text" value="markup">
<script>
var input = document.body.children[0];
input.setAttribute('value', 'new');
alert( input.value ); // 'new', input.value changed
alert( input.getAtrriobute(value) ); // 'new'
</script>
But attribute cannot get synchronization from property:
The code copy is as follows:
<input type="text" value="markup">
<script>
var input = document.body.children[0];
input.value = 'new';
alert(input.getAttribute('value')); // 'markup', not changed!
</script>
getAttribute gets the initial value, while dots get the initial value or the .value modified value. For example, when the visitor enters certain characters, the 'value' attribute maintains the original value after property is updated. The original value can be used to check whether the input changes, or to reset it.
For event handlers such as style and onclick, the getAttribute method returns a string when accessed, while the dot returns the corresponding object and event handler function.
For checked property in input
The code copy is as follows:
<script>
var input = document.body.children[0]
alert( input.checked ) // true
alert( input.getAttribute('checked') ) // empty string
</script>
getAttribute gets the value you are actually setting. The point returns a Boolean value.
Differences in browser compatibility
1. In IE<9 browsers, you can use dot numbers and getAttribute to access custom properties between each other.
2. IE<8 (including IE8 IE7 compatibility mode), property and attribute are the same. Because attribute is not case sensitive, in this case, when using getAttribute to access the feature, the browser will select the value that appears for the first time.
The code copy 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
Priority property
In actual applications, 98% of DOM operations use properties.
There are only two situations that require the use of attributes
1. Customize HTML attributes because it is not synchronized to the DOM property.
2. Access the built-in HTML attributes, which cannot be synchronized from property. For example, the value value of the INPUT tag.