Description of the property and attribute in JavaScript. For more information, see. First, let's take a look at the English meaning of these two words (from youdao dictionary ). First, property:
The Code is as follows:
Property ['pr ɔ p ti]
N. Nature, performance, property, ownership
English meaning:
Any area set aside for a particle purpose "the president was concerned about the property defined SS from the White House"
Synonym: place
Something owned; any tangible or intangible possession that is owned by someone "that hat is my property"; "he is a man of property"
Synonym: belongings | holding | material possession
A basic or essential attribute shared by all members of a class
A construct whereby objects or inpiduals can be distinguished "self-confidence is not an endearing property"
Synonym: attribute | dimension
Any movable articles or objects used on the set of a play or movie
Synonym: prop
Focus on 2, 3, and 4.
Look at attribute again:
The Code is as follows:
Attribute [comment 'tribju: t, 'comment tribju: t]
N. attributes; traits
Vt. Attribution; put... Attribution
English meaning:
N.
A construct whereby objects or inpiduals can be distinguished
Synonym: property | dimension
An illegal action belonging to or characteristic of an entity
V.
Attribute or credit to "We attributed this quotation to Shakespeare"
Synonym: impute | ascribe | assign
Decide as to where something belongs in a scheme
Synonym: assign
Property and attribute are all interpreted as "attributes", but attribute emphasizes the characteristics/characteristics that are different from other things. In this article, attribute is also submitted as a subset of property.
In JavaScript, property and attribute are significantly different. As we all know, setAttribute is the standard method for setting/adding attributes for DOM nodes:
Var ele = document. getElementById ("my_ele"); ele. setAttribute ("title", "it's my element"); but many times we also write this:
Ele. title = "it's my element"; if nothing happens, they all run well, and they seem to have no difference? In addition, we usually want to get the "attribute" We set. We also love to write it like this:
Alert (ele. title); at this time, you will encounter problems, if the attribute you set belongs to the standard attribute of the DOM element, whether it is through ele. setAttribute or ele. title settings can be obtained normally. But what if the set property is not a standard property but a custom property?
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); // 'your test title' custom attributes set through setAttribute can only be obtained through the standard getAttribute method; similarly, the custom attributes set by the dot sign cannot be obtained through the standard method getAttribute. In terms of the processing method of custom attributes, the standard methods of DOM attributes and the dot method do not have any relevance (the appeal code has compatibility issues in IE6 and will be further introduced later ).
The root cause of this difference in setting and obtaining "attributes" is actually the difference between property and attribute.
The "attribute" set by the vertex number is actually the set property. As attribute is a subset of the property mentioned above, the property set by the vertex number cannot be obtained only by the getAttribute method of the attribute.
Property and attribute
As shown in the figure, it seems easier to understand. getAttribute cannot obtain the property that does not belong to the attribute. However, at this time, you will find another problem. The property set through setAttribute should also belong to the property. Why cannot it be obtained through the point number?
In another way, we can only use the standard method and the dot method for the standard attributes. For custom attributes, the standard method and the dot method do not interfere with each other.
Custom Attributes do not interfere with each other
In JavaScript, attribute is not a subset of property. There is only an intersection between property and attribute, that is, the standard attribute. In this way, the question can be reasonably explained.
However, in IE9-, the Appeal conclusion is not true. IE9-in the browser, except for standard attributes, custom attributes are also shared, that is, standard methods and periods can both be read and written.
The successfully set attribute is reflected in HTML. You can see that the attribute is added to the corresponding tag through outerHTML. Therefore, if the attribute is not of the string type, the toString () method is called for conversion. However, in IE9-, the standard attribute and custom attribute are not partitioned. attribute can still be any type of data and does not call toString () conversion, non-string attribute is not reflected in HTML, but the more serious question is that this can easily cause memory leakage. Therefore, if it is not a string-type custom attribute, we recommend that you use the relevant methods in the mature framework (such as the data method in jQuery ).
Difference between getAttribute and period (.)
Although both the getAttribute method and the dot method can obtain standard attributes, they have different values for some attributes, such as href, src, and value.
Test Link 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 test shows that getAttribute obtains the element attribute literal, while the vertex number obtains the calculated value.
For more details, refer to this article: Attributes and custom properties.
