Reprinted from the product is slightly Library http://www.pinlue.com/article/2020/04/0210/4610102590257.html
property and attribute is very easy to confuse the two words in Chinese are also very similar (property: property, attribute: characteristics), but in fact, the two are different things, belong to different categories.
property is the DOM attribute is an object in JavaScript;
attribute is a characteristic of the HTML tags, which can only be a string value;
attribute and property presentation
Simple to understand, Attribute node is dom own attributes, such as commonly used html id, class, title, align the like.
And this is the Property DOM element as an object, its additional content, e.g. childNodes, firstChild like.
We have the following code:
<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div>var in1=document.getElementById("div1");console.log(in1);
For the id div1 the div, its property section reads as follows :()
May be found to have a "attributes" property named, type NamedNodeMap, while basic attributes "id" and "className", "title" and so on, but there is no "titles" This custom attributes.
console.log(in1.id); //div1console.log(in1.className); //divClassconsole.log(in1.title); //divTitleconsole.log(in1.title1); //undefined
Can be found, tag attributes, "id" and "className", "title" will be created on the in1, and "titles" will not be created. This is because every DOM object will have its default base property, and when it is created, it will only create these basic properties, our custom label in the TAG property is not directly into the DOM.
Where is the custom of "title1" go? In the attributes property where you can see the following:
"Title1" was on the attributes of the object, the object is sequentially recorded number of properties and attributes that we defined in the TAG.
Can be seen from here, it attributes belonging to a subset of the property, which holds the definition of the attributes of HTML tags. If we further explore the attitudes of each property, you will find they are not simple objects, it is an object of type Attr, with NodeType, NodeName and other attributes. In this regard, another study later. Note that the print attributes attribute value of the object will not be direct, but obtaining a string containing the name and attribute value, such as:
console.log(in1.attibutes.title1); // divTitle1
From this it follows:
HTML tags and attribute values are defined in the properties of the DOM object attributes stored inside;
JavaScript properties of these attribute types are selected Attr, and not just to save property names and values so simple;
Then as follows:
<input id="in_2">
In the following part of its property:
Although we did not define "value" in the TAG, but because it is the default base DOM attribute, it still will be created when the DOM initialization.
"Foot in both camps."
Commonly Attribute, e.g. id, class, title, etc., has been appended to the Property as a DOM object, and as Property values and assignment. But from Attribute definition, there would be no such special privileges, such as:
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>
This div inside "title1" will not become a Property.
That is, as long as the properties (html from) the label appearing in the DOM are Attribute. Then some common features (id, class, title, etc.), are converted to Property. Figuratively, one may say that these characteristics / attributes, a "foot in both camps," the.
A final note: called the "className" after "class" becomes the Property, as "class" is the ECMA keywords.
DOM has its default basic properties, and these properties is known as the "property", in any case, they will re-create the DOM objects during initialization.
If you assign values to these properties in the TAG, then these values will be assigned the same name as the initial value of the property DOM.
attribute and property values and assignment
1, attribute values
"Js advanced programming" is mentioned, for convenience, it is recommended that you use setAttribute () and getAttribute () can be operated.
<div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div> var id = div1.getAttribute("id"); var className1 = div1.getAttribute("class"); var title = div1.getAttribute("title"); var title1 = div1.getAttribute("title1"); //自定义特性
getAttribute () can get any characteristics, whether standard or custom.
But this method of browser compatibility problems, some browsers may obtain the value of the property Property, so jQuery to do a test to see getAttribute () whether the absolute value of acquired properties Attribute.
div1.className = 'a';var judge = div1.getAttribute("className") === 'a';
If the above code was established, indicating that getAttribute () method there is a problem, no longer used.
2, attribute assignment
div1.setAttribute('class', 'a'); div1.setAttribute('title', 'b'); div1.setAttribute('title1', 'c'); div1.setAttribute('title2', 'd');
() Assignment with setAttrbute, any Attribute can include custom. Moreover, the assignment of the Attribute will immediately show on the DOM element.
If it is a standard feature also updates the value of their associated attributes:
Finally, note, setAttribute () are two parameters, must be strings. That string of properties Attribute assignment function, while the property Property can be any type of assignment.
3, property values
Value of the property is very simple. Take any property only, you can use. "":
var id = div1.id; var className = div1.className; var childNodes = div1.childNodes; var attrs = div1.attributes;
Here again stressed:
When the class properties into characteristic, the changed name "className", and thus div1.className div1.getAttrbute ( 'class') the same.
Div1.attributes above code is taken of this property attributes, taken out of a variable saved to attrs, attrs became an object type NamedNodeList, which stores a plurality of types Attr.
4. Property Assignment
Assignment and basic js object property assignment as you can use. "":
div1.className = 'a';div1.align = 'center';div1.AAAAA = true;div1.BBBBB = [1, 2, 3];
Property values can be assigned to any property type, and the characteristics of Attribute can only be assigned a string!
Further, for the valued property Property in IE can cause a circular reference memory leaks. To prevent this problem, jQuery.data () to do a special deal, decoupling the data and DOM objects.
Changing one property and attribute value What will happen
in1.value='new value of prop';console.log(in1.value); // 'new value of prop'console.log(in1.attributes.value); // 'value="1"'
In this case, the value of the input fields on the page into a "new value of prop", and propety in value has become a new value, but attributes it still is "1." From here you can infer the value of the property and the property of the same name attribute is not a two-way binding.
If, in turn, set the value in attitudes, the effect would happen then?
in2.setAttribute('value','ni') console.log(in2.value); //niconsole.log(in2.attributes.value); //value='ni'
Thus, it can be concluded:
property to be synchronized from the attribute;
The property attribute value will not be synchronized;
The attribute data and the binding property between unidirectional, attribute-> property;
Change any value on the property and attribute, it will be updated to reflect the HTML page;
