A detailed explanation of the differences between attribute and property in JavaScript

The attribute and property of DOM elements are easy to mix and abnormal together, they are not clear, they are different things, but they are closely related. Many novice friends, including the old me, often do not understand.

Attribute translated into Chinese terms as "characteristics", property translated into Chinese terms as "attributes", from the literal meaning of Chinese, it is a little different, first of all, say attribute.

attribute is an attribute node, each DOM element has a corresponding attributes attribute to hold all attribute nodes, attributes is a container for an array of classes, and the exact point is Namenodemap, In short, it is a container that is similar in array but not quite the same. Each numeric index of the attributes holds a attribute node in the form of a name-value pair (name= "value").

Copy CodeThe code is as follows: <div class= "box" id= "box" gameid= "880" >hello</div>

The HTML code for the above DIV element has class, ID, and custom GameID, which are stored in attributes, similar to the following:

Copy CodeThe code is as follows: [class= "box", id= "box", gameid= "880"]

You can access the attribute node in this way:

Copy CodeThe code is as follows:
var elem = document.getElementById (' box ');
Console.log (Elem.attributes[0].name); Class
Console.log (Elem.attributes[0].value); Box

But ie6-7 a lot of things in the attributes, the above method of access and standard browser return results are different. You typically get a attribute node directly using the GetAttribute method:

Copy CodeThe code is as follows: Console.log (Elem.getattribute (' GameID ')); 880

To set up a attribute node using the SetAttribute method, use RemoveAttribute to remove it:

Copy CodeThe code is as follows: Elem.setattribute (' testattr ', ' testval ');
Console.log (Elem.removeattribute (' GameID ')); Undefined

Attributes is dynamically updated with the addition or deletion of attribute nodes.
A property is an attribute that, if viewed as a normal object object, is a property that is stored in object as a name-value pair (name= "value"). Adding and removing property is much simpler, and it's not the same as a normal object:

Copy CodeThe code is as follows:
Elem.gameid = 880; Add to
Console.log (Elem.gameid)//Get
Delete Elem.gameid//Remove

The reason why attribute and property is easy to mix abnormal is that many attribute nodes also have a corresponding property attribute, such as the above DIV element ID and class is both attribute, and there is the property, It can be accessed and modified regardless of which method is used.

Copy CodeThe code is as follows:
Console.log (Elem.getattribute (' id ')); Box
Console.log (elem.id); Box
elem.id = ' Hello ';
Console.log (Elem.getattribute (' id ')); Hello

But for custom attribute nodes, or custom property, there is no relationship between the two.

Copy CodeThe code is as follows:
Console.log (Elem.getattribute (' GameID ')); 880
Console.log (Elem.gameid); Undefined
Elem.areaid = ' 900 ';
Console.log (Elem.getattribute (' Areaid '))//null

For ie6-7, there is no distinction between attribute and property:

Copy CodeThe code is as follows:
Console.log (Elem.getattribute (' GameID ')); 880
Console.log (Elem.gameid); 880
Elem.areaid = ' 900 ';
Console.log (Elem.getattribute (' Areaid '))//900

Many novice friends estimate that it is easy to fall into this hole.
Dom elements some of the default common attribute nodes have property properties corresponding to them, some of which are of a Boolean type, such as some form elements:

Copy CodeThe code is as follows:
<input type= "Radio" checked= "Checked" id= "Raido" >
var radio = document.getElementById (' Radio ');
Console.log (Radio.getattribute (' checked ')); Checked
Console.log (radio.checked); True

For these special attribute nodes, only the node is present, the value of the corresponding property is true, for example:

Copy CodeThe code is as follows:
<input type= "Radio" checked= "Anything" id= "Raido" >
var radio = document.getElementById (' Radio ');
Console.log (Radio.getattribute (' checked ')); Anything
Console.log (radio.checked); True

Finally, in order to better distinguish between the attribute and the property, the basic can be summarized as the attribute node is visible in the HTML code, and the properties are just a common name value pairs attribute.

Copy CodeThe code is as follows:
Both the GameID and the ID are attribute nodes
The ID can also be accessed and modified through the property.
<div gameid= "880" id= "box" >hello</div>
Areaid is only the property
Elem.areaid = 900;

A detailed explanation of the differences between attribute and property in JavaScript