Detailed explanation of the difference between attribute and property in JavaScript_Basic knowledge

The attributes and properties of DOM elements are easily confused together and cannot be clearly distinguished. They are different things, but they are closely related. Many novice friends, including me in the past, are often confused.

Attribute is translated into Chinese terms as "characteristics", and property is translated into Chinese terms as "attributes". From the literal meaning in Chinese, there is indeed a slight difference. Let's talk about attribute first.

Attribute is an attribute node. Each DOM element has a corresponding attributes attribute to store all attribute nodes. Attributes is an array-like container. To be precise, it is NameNodeMap. In short, it is an array-like container. But it is not the same container as an array. Each numeric index of attributes stores an attribute node in the form of a name-value pair (name="value").

Copy code The code is as follows:

hello

The HTML code of the div element above contains class, id and custom gameid. These characteristics are stored in attributes, similar to the following form:

Copy code The code is as follows:

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

You can access the attribute node like this:

Copy the code The 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 stores many things in attributes, and the above access method returns different results from the standard browser. Usually, to obtain an attribute node, use the getAttribute method directly:

Copy the code The code is as follows:

console.log( elem.getAttribute('gameid') ); // 880

To set an attribute node use the setAttribute method, to delete it use removeAttribute:

Copy code The code is as follows:

elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined

Attributes will be dynamically updated as attribute nodes are added or deleted.
Property is a property. If the DOM element is regarded as an ordinary Object object, then property is a property stored in the Object in the form of a name-value pair (name="value"). It is much easier to add and delete properties, no different from ordinary objects:

Copy code The code is as follows:

elem.gameid = 880; // Add
console.log( elem.gameid ) // Get
delete elem.gameid // Delete

The reason why attributes and properties are easily confused together is that many attribute nodes also have a corresponding property attribute. For example, the id and class of the div element above are both attributes and corresponding properties, no matter which one is used. Methods can be accessed and modified.

Copy code The 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 properties, the two have nothing to do with each other.

Copy code The 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 code The 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 may easily fall into this pit.
Some default common attribute nodes of DOM elements have corresponding property attributes. What is more special are some properties whose values ​​are Boolean type, such as some form elements:

Copy code The code is as follows:

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // checked
console.log( radio.checked ); // true

For these special attribute nodes, as long as the node exists, the value of the corresponding property is true, such as:

Copy codeThe code is as follows:

var radio = document.getElementById( 'radio' );
console.log( radio.getAttribute('checked') ); // anything
console.log( radio.checked ); // true

Finally, in order to better distinguish attribute and property, it can be basically summarized that attribute nodes are visible in HTML code, while property is just an ordinary name-value pair attribute.

Copy code The code is as follows:

// gameid and id are both attribute nodes
//The id can also be accessed and modified through property

hello

// areaid is just property
elem.areaid = 900;