First look at the English interpretation of these two words (from Youdao dictionary). First property:
Copy Code code as follows:
property [' Prɔpəti]
N. Properties, properties, property, ownership
English-English Interpretation:
Any area set aside for a particular purpose "the President is concerned about the property across to the White House"
Synonyms: Place
something owned; Any tangible or intangible possession the ' is ' owned by someone ' this hat is my property '; "He was a man"
Synonyms: Belongings | Holding | Material possession
A basic or essential attribute shared by the A class
A construct whereby objects or individuals can be distinguished "self-confidence are not a endearing property"
Synonyms: Attribute | Dimension
Any movable articles or objects used on the set of a play or movie
Synonym: Prop
Focus on 2, 3, 4.
Then look at the attribute:
Copy Code code as follows:
attribute [ə ' tribju:t, ' ætribju:t]
N. Attributes; characteristics
Vt. To give a place to; Attribution
English-English Interpretation:
N.
A construct whereby objects or individuals can be distinguished
Synonyms: Property | Dimension
An abstraction belonging to or characteristic of a entity
V.
attribute or credit to ' We attributed this quotation to Shakespeare '
Synonyms: Impute | Ascribe | Assign
Decide as to where something belongs in a scheme
Synonym: Assign
Property,attribute are all "attribute" solutions, but attribute is more emphasis on distinguishing features from other things, and in this article it is also submitted to attribute as a subset of property.
And in JavaScript, property and attribute are more obvious difference. As we all know, setattribute is the standard way to set/Add attributes for DOM nodes:
var ele = document.getElementById ("My_ele"); Ele.setattribute ("title", "It's my Element"); but many times we write this:
Ele.title = "It's my element"; If nothing happens, they run well, they don't seem to make any difference. And usually we want to get the "properties" we set, and we love to write this:
alert (ele.title); At this time, you will encounter problems, if you set the property belongs to the DOM element itself has the standard attributes, whether through the Ele.setattribute or Ele.title way to set, can be normal access. But what if the property you set is not a standard attribute, but a custom attribute?
Ele.setattribute (' mytitle ', ' Test my title '); alert (ele.mytitle); Undefined alert (ele.getattribute (' mytitle ')); ' Test my title ' Ele.yourtitle = ' your test title '; Alert (Ele.getattribute (' yourtitle ')); NULL alert (Ele.yourtitle); The ' your test title ' can only be obtained by using the standard GetAttribute method through the custom attributes set by SetAttribute, and also by the custom properties set by the dot way cannot be obtained through the standard method getattribute. The Standard and Dot methods of DOM properties are no longer associated with the way the custom attributes are handled (the appeal code has a compatibility problem with the ie6-and will continue to be introduced later).
This kind of establishment, obtains "the attribute" the difference, investigates its root, actually also is the property and the attribute difference result.
The "attribute" set by the dot number is actually the property of the setting, such as the attribute is a subset of the properties, then the number of settings can not be set by the GetAttribute method to obtain the attribute.
It seems to be easier to understand the picture, getattribute not be able to acquire the property that is not attribute is also taken for granted. But this time you will find another problem, through the setattribute set of properties, also should belong to the property, then why can't get through the dot?
We have to understand that only standard attributes can use both standard and Dot methods, while for custom attributes, standard methods and point-numbering methods do not interfere with each other.
Custom properties do not interfere with each other
So, in JavaScript, attribute is not a subset of the property, the attribute and attribute only intersect, that is, the standard attributes, so the question can be reasonably explained.
But in the ie9-, the appeal conclusion is not tenable. In ie9-browsers, custom attributes are shared in addition to the standard attributes, that is, the standard method and the point number are readable and writable.
Successful settings will be reflected in the HTML, through the outerhtml can see that attribute has been added to the corresponding tag, so if attribute is not string type data will invoke the ToString () method to convert. However, because standard attributes are not distinguished from custom attributes in ie9-, attribute can still be any type of data, and no ToString () conversion is invoked, and non-string attributes are not reflected in HTML, but the more serious problem is that This can easily lead to a memory leak. Therefore, if it is not a custom attribute of string type, it is recommended to use the relevant methods in the mature framework (such as the data method in jquery).
GetAttribute and Dot number (.) The difference of
Although the getattribute and Dot methods can get the standard attributes, they have different values for some attributes, such as Href,src,value.
<a href= "#" id= "link" >test link</a> "<input type=" text "value=" Enter text "id=" IPT "/> <script> var $ = function (ID) {return document.getElementById (ID);}; Alert ($ (' link '). getattribute (' href '));//# Alert ($ (' link '). href);//fullpath/file.html# alert (' image '). GetAttribute (' src '))//img.png alert ($ (' image '). src)//fullpath/img.png alert ($ (' IPT '). getattribute (' value '))// Enter text alert ($ (' IPT '). Value)//enter text $ (' IPT '). Value = 5; Alert ($ (' IPT '). getattribute (' value '))//enter text alert ($ (' IPT '). Value)//5 </script> The test discovers that GetAttribute gets the literal amount of the element attribute, and the point number gets the computed value.
More details to view this article: Attributes and Custom properties
