The difference between attribute and property in JavaScript-basic knowledge

The attributes and property of DOM elements are easily mixed with each other, it is not clear that the two are different things, but the 倄 are closely related. Many novice friends, including the former me, often do not understand.

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

attribute is an attribute node, each DOM element has a corresponding attributes attribute to store all attribute nodes, attributes is a container of class array, the exact point is Namenodemap, In short, a similar array, but also a different set of containers. Each numeric index of the attributes stores an attribute node in the form of a name value pair (name= "value").

Copy Code code as follows:

<div class= "box" id= "box" gameid= "880" >hello</div>

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

Copy Code code as follows:

[class= "box", id= "box", gameid= "880"]

You can access attribute nodes like this:

Copy Code code as follows:

var elem = document.getElementById (' box ');
Console.log (Elem.attributes[0].name); Class
Console.log (Elem.attributes[0].value); Box

But Ie6-7 put a lot of things in the attributes, the access method above and the return result of the standard browser are different. Usually to obtain an attribute node directly using the GetAttribute method:

Copy Code code as follows:

Console.log (Elem.getattribute (' GameID ')); 880

To set an attribute node to use the SetAttribute method, delete it with RemoveAttribute:

Copy Code code as follows:

Elem.setattribute (' testattr ', ' testval ');
Console.log (Elem.removeattribute (' GameID ')); Undefined

Attributes is dynamically updated with the addition or deletion of attribute nodes.
The property is an attribute, and if the DOM element is considered to be a normal object, then the property is an attribute that is stored in object in the form of a name-value pair (name= "value"). Adding and removing property is much simpler, and it's no different than a normal object:

Copy Code code as follows:

Elem.gameid = 880; Add to
Console.log (Elem.gameid)//Get
Delete Elem.gameid//delete

The reason why attribute and property easy to mix 倄 together is that many attribute nodes have a corresponding property attribute, such as the DIV element above the ID and class is attribute, there are corresponding property, No matter which method you use, you can access and modify it.

Copy Code code 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, the two are not related.

Copy Code code 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 distinguishing between attribute and property:

Copy Code code 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 are likely to fall into this hole easily.
Some of the default common attribute nodes of a DOM element have property properties that are corresponding to them, especially those that are of Boolean type, such as some form elements:

Copy Code code 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, and the value of the corresponding property is true, such as:

Copy Code code 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 attribute and property, the basic can be summed up as attribute nodes are visible in the HTML code, and properties are just a common name value pairs attribute.

Copy Code code as follows:

GameID and IDs are attribute nodes
IDs can also be accessed and modified by property
<div gameid= "880" id= "box" >hello</div>
Areaid is just a property.
Elem.areaid = 900;