The difference between property and Attribute

Property and attribute are very easy to confuse, and the Chinese translation of two words is very similar (properties: attributes, Attribute: properties), but in fact, they are different things and belong to different categories.

• property is an attribute in the DOM and is the object in JavaScript;
• attribute is an attribute on an HTML tag, and its value can only be a string;

Analyze property and attribute based on JavaScript

There is a piece of code in the HTML:

<input id="in_1" value="1" sth="whatever">

Simply create an input field on the HTML page (note that a non-existent attribute "STH" in the DOM is added to this tab), at which point the following statement is executed in JS

var in1 = document.getElementById(‘in_1‘);

EXECUTE statement

console.log(in1);

From the console print results, you can see that in1 contains a property named "Attributes", its type is namednodemap, and there are "id" and "value" two basic properties, but there is no "sth" this custom property.

attributes: NamedNodeMapvalue: "1"id: "in_1"

Some console may not print properties on in1, so you can print the properties you want to observe by executing the following command:

console.log(in1.id);// ‘in_1‘console.log(in1.value);// 1console.log(in1.sth);// undefined

You can see that the three attributes in the tag, only "id" and "value" are created on in1, and "Sth" is not created. This is because every DOM object has its default base property, and when it is created, it only creates these basic properties, and the properties we customize in the tag tag are not placed directly in the DOM.

Let's do an extra test, create another input tag, and do something like this:

Html:

<input id="in_2">

Js:

var in2 = document.getElementById(‘in_2‘);console.log(in2);

From the printing information, you can see:

id: "in_2"value: null

Although we do not define "value" in the tag, it is still created when the DOM is initialized because it is the default basic property of the DOM. From this we can draw the conclusion that:

• The DOM has its default basic properties, which are called "property", which, in any case, will be created on the DOM object at initialization time.
• If these properties are assigned at tag, then these values are assigned to the DOM's property with the same name as the initial value.

Now go back to the first input ("#in_1") and we'll ask, "Where's sth?" Don't worry, we'll print out the attributes attribute to see

console.log(in2);

There are several properties above:

0: id1: value2: sthlength: 3__proto__: NamedNodeMap

The original "Sth" was put into the object of attributes, the object in order to record the number of attributes and attributes we have defined in the tag. At this point, if you print the attributes of the second input tag again, you will find that there is only one "id" attribute and "Length" is 1.

As can be seen from here, attributes is a subset of the property, which holds the attributes defined on the HTML tag. If you explore each of the properties in attitudes, you will find that they are not simple objects, they are objects of a attr type, and have properties such as NodeType, NodeName, and so on. On this point, we will look at it later. note that the Print attribute property does not directly get the value of the object, but instead gets a string that contains the property name and value, such as:

console.log(in1.attibutes.sth);// ‘sth="whatever"‘

From this we can conclude that:

• The attributes and values defined in the HTML tag are saved inside the Attributes property of the DOM object;
• The types in JavaScript for these attribute properties are attr, rather than just saving property names and values so easily;

So what happens if we change the value of the property and attribute? Execute the following statement:

in1.value = ‘new value of prop‘;console.log(in1.value);// ‘new value of prop‘console.log(in1.attributes.value);// ‘value="1"‘

At this point, the value of the input field in the page becomes "new value of Prop", and value in Propety becomes a new value, but attributes is still "1". From here, it can be inferred that the property and attribute values of the same name attribute are not two-way bound.

If in turn, set the value in attitudes, what will the effect be?

in1.attributes.value.value = ‘new value of attr‘;console.log(in1.value);// ‘new value of attr‘console.log(in1.attributes.value);// ‘new value of attr‘

At this point, the input field in the page is updated and the value in the property has changed. Also, execute the following statement to get the same result

in1.attributes.value.nodeValue = ‘new value of attr‘;

Thus, it can be concluded that:

• The property can be synchronized from the attribute ;
• attribute does not synchronize the value on the property;
• The data binding between the attribute and the property is unidirectional,attribute->property;
• Changing any value on the property and attribute will reflect the update to the HTML page;

Analysis of attribute and property based on jquery

So what are the attr and prop methods in jquery?

First use Jquery.prop to test

$(in1).prop(‘value‘, ‘new prop form $‘);console.log(in1.value);// ‘new prop form $‘console.log(in1.attributes.value);// ‘1‘

The value of the input field was updated, but attribute was not updated.

and test it with jquery.attr.

$(in1).attr(‘value‘, ‘new attr form $‘);console.log(in1.value);// ‘new attr form $‘console.log(in1.attributes.value);// ‘new attr form $‘

The value of the input field is updated, and both the property and the attribute are updated.

From the phenomena described above, it can be inferred that the jquery.attr and Jquery.prop are essentially the same as the native operating methods, the property gets the synchronization from the attribute, but attribute does not get synchronization from the property. So how does jquery work?

Next, let's look at the source code of JQUERY.ATTR and Jquery.prop.

jquery source $ (). Prop Source Code

jQuery.fn.extend({prop: function( name, value ) {return access( this, jQuery.prop, name, value, arguments.length > 1 );},... // removeProp方法});

$ (). attr Source Code

jQuery.fn.extend({attr: function( name, value ) {return access( this, jQuery.attr, name, value, arguments.length > 1 );},... // removeAttr方法});

Either attr or prop, the access method is called to access the elements of the DOM object, so to study more, you have to read access's implementation source.

Jquery.access

This is a multifunctional function that can be used to get or set the value of a collection//if the "value" is a function, then this function will be executed//@param elems, Element set//@param FN, the method of processing the element//@param key, element name//@  param value, new values//@param chainable, whether to make chained calls//@param emptyget,//@param Raw, whether the element is a non-function object var access = Jquery.access = function (Elems, FN, key, value, chainable, Emptyget, raw) {var i = 0,//iteration count length = elems.length,//element Lengths Bulk = key = = null;//to determine if there is a specific key (property name)//If there are multiple properties, recursion is used to access these values individually if (jquery.type (key) = = = "Object") {chainable = True;for (i in key) {jquery.access (Elems, FN, I, Key[i], true, Emptyget, raw);} Sets a value of} else if (value!== undefined) {chainable = True;if (!jquery.isfunction (value)) {//If the value is not a functionraw = tr UE;} if (bulk) {//Bulk operations run against the entire set//if the property name is empty and the property name is not a function, the external processing method, fn and value, is used to perform the operation if (raw) {fn. Call (Elems, value); fn = null;//... except when executing function values//if value is a function, then reconstruct the processing method fn//This new FN will be VA The Lue function is passed as a callback to the old processing method} else {bulk = FN;FN = function (Elem, key, value) {Return Bulk.call (JQuery (elem), value);};}} if (FN) {//Use the processing method fn to process each element in the element collection for (; i < length; i++) {fn (elems[i], key, Raw Value:value.call (elems[i], I , FN (Elems[i], key));//If value is a Funciton, then first use this function to return a value and pass in the Fn}}}return chainable? Elems://If it is a chained call, return the element set//GETSB Ulk Fn.call (elems): Length? FN (Elems[0], key): Emptyget;};

Although the access method is not long, but is very round, it is not easy to read it completely, so you can simplify access for jQuery.fn.attr calls.

The access call in Jquery.fn.attr/jquery.fn.prop

$ (). Attr Method of invocation:

• $ (). attr (PropertyName)//Get a single property
• $ (). attr (propertyname, value)//Set individual properties
• $ (). attr (properties)//Set multiple attributes
• $ (). attr (propertyname, function)//Call callback function on property

Prop is called in the same way as attr, and is not repeated here. For the sake of simplicity, only the first and second invocation methods are studied here.

Call statement:

access( this, jQuery.attr, name, value, arguments.length > 1 )；

Simplified access:

 //Elems The current JQuery object, may contain multiple DOM objects//FN Jquery.attr method//Name Property name//Value property values//chainable if value is empty, Then chainable is false, otherwise chainable is truevar access = Jquery.access = function (Elems, FN, key, value, chainable, Emptyget, Raw) {var i = 0,//iteration count length = elems.length,//Property Number bulk = false;//Key! = Nullif (value!== undefined) {//if value is not NULL, set new value , otherwise returns the value of this property chainable = True;raw = true;//value is not functionif (FN) {//FN is jquery.attrfor (; i < length; i++) {fn (elem S[i], key, value);//Jquery.attr (Elems, key, value);}}} if (chainable) {//value is not NULL, the expression is Getreturn elems;//The return element implements a chained call} else {if (length) {///If the element collection length is nonzero, return the property value of the first element return FN ( Elems[0], key); Jquery.attr (Elems[0], key);} else {return emptyget;//returns a default value, here is undefined}}};  

By simplifying the code, you know that access is the function of iterating through the collection of elements from the last $ call and calling the FN function on it. Inside Jquery.attr and Jquery.prop, access is used to traverse the element set merging to control its implementation of attribute and property. Access in the source code, there are multiple sections of conditional transfer codes, look dazzling, the ultimate goal is to be able to implement the elements set of variables and do different operations, complex code to make jquery interface more simple, can greatly improve the code reusability, meaning to reduce the amount of code, Increase the density of the code so that the JS file size is reduced.

These are off-topic, now go back to $ (). attr and $ (). Prop implementation. In general, both of these prototype methods use access to make variables for the set of elements and invoke the Jquery.prop and jquery.attr methods on each element. Be aware that The Jquery.prop and jquery.attr here are not methods on the prototype chain, but the method of the object itself, which is extended using the Jquery.extend method (JQuery.fn.prop and jQuery.fn.attr are used Jquery.fn . Extend for method expansion).

Look at the source code of the two methods below.

Jqury.attr

Jquery.extend ({attr:function (elem, name, value) {var hooks, Ret,ntype = elem.nodetype;//get node type//If Elem is empty or nodeType is the following type//2:attr, attribute, child node has text, entityreference//3:text, element or attribute in the textual content//8:comment, comment//Do not take any action if (!elem | | nType = = 3 || NType = = 8 | | NType = = = 2) {return;} If the attitude method is supported, call the property method if (typeof Elem.getattribute = = = strundefined) {return Jquery.prop (elem, name, value); }//If the node type of Elem is not an element (1) if (nType!== 1 | |!jquery.isxmldoc (elem)) {name = Name.tolowercase ();//For browser compatibility, get the hook function, handle some Special element hooks = jquery.attrhooks[Name] | | (JQuery.expr.match.bool.test (name)? boolhook:nodehook);} if (value!== undefined) {//if value is not undefined, execute ' SET ' if (value = = = NULL) {//If value is null, remove Attributejquery.removea TTR (elem, name);}  else if (hooks && "set" in hooks && (ret = Hooks.set (elem, value, name))!== undefined) {return ret;// Use the hook function} else {//Use the DOM's SetAttribute method Elem.setattribute (name, Value + "");//Note that you want to convert value to string because all aThe value of the Ttribute is Stringreturn value;} If value is undefined, execute "get"} else if (hooks && "get" in hooks && (ret = Hooks.get (elem, name))!== Nu ll) {return ret;//uses the hook function} else {ret = jQuery.find.attr (elem, name);//sizzle.attr is actually called, this method handles compatibility issues to get attribute values Return the obtained value return RET = = null? Undefined:ret;}},...});

As you can see from the code, JQUERY.ATTR calls the GetAttribute and SetAttribute methods.

Jqeury.prop

jQuery.extend({...prop: function( elem, name, value ) {var ret, hooks, notxml,nType = elem.nodeType;// 过滤注释、Attr、元素文本内容if ( !elem || nType === 3 || nType === 8 || nType === 2 ) {return;}notxml = nType !== 1 || !jQuery.isXMLDoc( elem );if ( notxml ) {// 如果不是元素name = jQuery.propFix[ name ] || name;// 修正属性名hooks = jQuery.propHooks[ name ];// 获取钩子函数}if ( value !== undefined ) {// 执行"SET"return hooks && "set" in hooks && (ret = hooks.set( elem, value, name )) !== undefined ?ret :// 调用钩子函数( elem[ name ] = value );// 直接对elem[name]赋值} else {// 执行"GET"return hooks && "get" in hooks && (ret = hooks.get( elem, name )) !== null ?ret :// 调用钩子函数elem[ name ];// 直接返回elem[name]}},...});

The Jquery.prop is directly manipulating the property on the DOM object.

By comparing Jquery.prop and jquery.attr, it is found that the former directly operates on the property of the DOM object and the latter calls the SetAttribute and GetAttribute methods. What is the method of setattribute and getattribute? What's the effect?

SetAttribute and GetAttribute

Based on the input box used in the previous test, execute the following code:

in1.setAttribute(‘value‘, ‘new attr from setAttribute‘);console.log(in1.getAttribute(‘value‘));// ‘new attr from setAttribute‘console.log(in1.value);// ‘new attr from setAttribute‘console.log(in1.attributes.value);// ‘value=?"new attr from setAttribute"‘,实际是一个Attr对象

After SetAttribute is executed, it is as if the property of the same name is changed directly in attributes;
The result of GetAttribute is the same as the result of accessing the property, rather than returning a attr object as if it were accessed directly by Attritudes.

Special examples of href

However, is not all tags, all attributes maintained such a feature? Let's look at the href attribute/attribute.

First create a <A\> tag in HTML:

<a href=‘page_1.html‘ id=‘a_1‘></a>

Execute the following code in the JS script:

console.log(a1.href);// ‘file:///D:/GitHub/JS/html/test_01/page_1.html‘console.log(a1.getAttribute(‘href‘));// ‘page_1.html‘

As you can see, the property holds an absolute path, whereas a relative path is saved in attribute. So, what happens if you change these values?

Change attribute:

a1.setAttribute(‘href‘, ‘page_2.html‘);// 相对路径console.log(a1.href);// ‘file:///D:/GitHub/JS/html/test_01/page_2.html‘console.log(a1.getAttribute(‘href‘));// ‘page_2.html‘a1.setAttribute(‘href‘, ‘/page_3.html‘);// 根目录路径console.log(a1.href);// ‘file:///D:/page_3.html‘console.log(a1.getAttribute(‘href‘));// ‘/page_3.html‘

Change Property:

a1.href = ‘home.html‘;// 相对路径console.log(a1.href);// ‘file:///D:/GitHub/JS/html/test_01/home.html‘console.log(a1.getAttribute(‘href‘));// ‘home.html‘a1.href = ‘/home.html‘;// 根目录路径console.log(a1.href);// ‘file:///D:/home.html‘console.log(a1.getAttribute(‘href‘));// ‘/home.html‘

It can be found from here that href is a special attribute/attribute, which is two-way bound, and changing either side will cause the value of the other party to change. Moreover, this is not a simple two-way binding, and the href in the property always holds the absolute path, while the href in attribute is the relative path.

Seeing here, the difference between attribute and property is a little bit more, however, it makes people more puzzled. Are there other similar special cases?

Id

Try to change the ID in the property:

a1.id = ‘new_id‘;console.log(a1.id);// ‘new_id‘console.log(a1.getAttribute(‘id‘));// ‘new_id‘

God, now attribute in the ID from the property of the ID has been synchronized, the data direction into the property <=> attribute;

Disabled

Take a look at this property of disabled, we add the "disabled" feature to the first <INPUT\>:

<input id="in_1" value="1" sth="whatever" disabled=‘disabled‘>// 此时input已经被禁用了

Then execute the following code:

console.log(in1.disabled);// truein1.setAttribute(‘disabled‘, false);// 设置attribute中的disabled，无论是false还是null都不会取消禁用console.log(in1);// trueconsole.log(in1.getAttribute(‘disabled‘));// ‘false‘

Changing the disabled in attributes does not change the property, nor does it cancel the disable effect of the input bar.
If you change to the following code:

console.log(in1.disabled);// truein1.disabled = false;// 取消禁用console.log(in1.disabled);// falseconsole.log(in1.getAttribute(‘disabled‘));// null，attribute中的disabled已经被移除了

Or:

console.log(in1.disabled);// truein1.removeAttribute（‘disabled‘);// 移除attribute上的disabled来取消禁用console.log(in1.disabled);// falseconsole.log(in1.getAttribute(‘disabled‘));// null，attribute中的disabled已经被移除了

You can see that setting the disabled in the property to False will remove the disabled in attributes. This data binding becomes again,Property<=>attribute;

So the problem of data binding between property and Attritude cannot be simply explained by "Property<-attribute".

Summarize

Analysis of so much, the difference between the property and attribute understanding is also deeper, summed up here:

Create

• The default base property is created when the DOM object is initialized;
• Only the attribute defined in the HTML tag will be stored in the property's attributes attribute;
• Attribute initializes the property with the same name, but the custom attribute does not appear in the properties;
• The values of the attribute are all strings ;

Data binding

• Attributes data will be synchronized to the property, but the property changes will not change the attribute;
• For attributes/attributes such as Value,class, the direction of data binding is unidirectional,attribute->property;
• For the ID , data binding is bidirectional,attribute<=>property;
• For disabled, the disabled on the property is false, and the disabled on the attribute is bound to exist, at which point the data binding can be considered bidirectional ;

Use

• You can use the DOM's SetAttribute method to change the attribute at the same time;
• Direct access to the value on the attributes will get a attr object, and access through the GetAttribute method will directly get the value of attribute;
• In most cases (unless there is a browser compatibility issue), Jquery.attr is implemented through setattribute, and Jquery.prop directly accesses the property of the DOM object;

Up to this point, the property is an attribute owned by the DOM object itself, and attribute is the attribute that we assign to it by setting the HTML tag, and there are special data links between the properties/attributes of the attribute and the property that have the same name. These connections differ in different attributes/attributes.

In fact, here, the difference between property and attribute is difficult to describe with simple technical features, and I find the following answer on Stackflow, or closer to the real answer:

These words existed before computer science came around.

Attribute is a quality or object, we Attribute to someone or something. For example, the scepter are an attribute of power and statehood.

Property was a quality that exists without any attribution. For example, clay have adhesive qualities; Or, one of the properties of metals is electrical conductivity. Properties demonstrate themselves though physical phenomena without the need attribute them to someone or something. By the same tokens, saying that someone have masculine attributes is self-evident. In the effect, you could say, the A property was owned by someone or something.

To is fair though, in computer science These-words, at least for the more part, can is used interchangeably-but then Again programmers usually don ' t hold degrees in 中文版 literature and do not write or care much about grammar books:).

The two most critical words:

• attribute is a trait or object that we give to something.
• Property (attribute) is a trait that has long existed and does not require external attribution.

Reference

Http://stackoverflow.com/questions/258469/what-is-the-difference-between-attribute-and-property

http://www.jb51.net/article/50686.htm/a

Http://www.cnblogs.com/elcarim5efil/p/4698980.html

The difference between property and Attribute (Turn)