The difference between property and attribute in javascript detail _ basics

1. Define

Property: Properties, all HTML elements are represented by the HtmlElement type, the HtmlElement type directly inherits from the element and adds some attributes, which correspond to the following 5 standard attributes for each HTML element: ID, Title,lang,dir,classname. A DOM node is an object, so he can add custom properties and methods like other JavaScript objects. The value of the property can be any data type, sensitivity to case sensitive, custom property will not appear in the HTML code, only JS.

attribute: characteristics, different from Property,attribute can only be strings, case insensitive, appear in the innerHTML, through the class array attributes can list all the attribute.

2. The same place

The standard DOM properties are synchronized with the attributes. Recognized (not customizable) attributes are added to the DOM object as attributes. such as Id,align,style and so on, the Operation property or the DOM method that uses the operation characteristic such as getattribute () can manipulate the attribute. However, the attribute name passed to GetAttribute () is the same as the actual attribute name. So when you get the attribute value of class, you pass in "class".

3. The difference

1. For the operation of some standard characteristic, getattribute and dot number (.) The value obtained has a difference. such as Href,src,value,style,onclick, such as event handlers.
2. Href:getattribute gets the actual value of the href, and the dot gets the full URL, and there is a browser difference.

Copy Code code 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 obtained like an href, but IE also returns a full URL;
The value value also has built-in properties for some ' one-way ' (one-way) synchronization.
For example, Input.value is synchronized from attribute (that is, the property is synchronized from attribute)

Copy Code code 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.getatrribute (value)); ' New '
</script>

But attribute cannot be synchronized from the property:

Copy Code code 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, and the dot gets the initial value or the modified value of. Value, for example, when a visitor enters certain characters, the ' value ' attribute maintains the original value after the property has been updated. The original value can be used to verify that input is changing or to reset it.

For event handlers such as style and OnClick, a string is returned when the GetAttribute method accesses, and the point number returns the corresponding object and event handler function.

For the checked property in input

Copy Code code as follows:

<script>
var input = document.body.children[0]
Alert (input.checked)//True
Alert (Input.getattribute (' checked '))//empty string
</script>

GetAttribute Gets the value that you are actually setting. And the point number returns a Boolean value.

Differences in Browser compatibility

1. In ie<9 browsers, you can access custom properties between each other using dots and getattribute.
2.ie<8 (including the IE7 compatibility mode of IE8), the property and attribute are the same. Because attribute is not sensitive to case, in this case, the browser will choose the first occurrence of the value when using GetAttribute to access the feature.

Copy Code code 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 Selection Property

In practical applications, 98% of DOM operations are using properties.
Only two scenarios require the use of attributes

1. Customize the HTML attributes because it is not synchronized to the DOM property.
2. Access to the built-in HTML attributes, these attributes cannot be synchronized from the property. such as the value of the input label.