The difference between attributes and properties in javascript

Attributes and properties of DOM elements are easy to be mixed and confused. They are different things, but they are closely related. Many novice friends, including my former self, are often confused.

Attribute is translated into Chinese as "property", while property is translated into Chinese as "property". From the literal meaning of Chinese, there is a little difference. Let's talk about attribute first.

Attribute is a property node. Each DOM element has a corresponding attributes attribute attribute to hold all attribute nodes. Attributes is an array-like container, NameNodeMap to be precise. Each numeric index of attributes holds an attribute node in the form of a name-value pair (name= "value").

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

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

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

The attribute node can be accessed by:

var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box

But ie6-7 puts a lot of things in attributes, and the access method is different from the return result of a standard browser. Usually, to get an attribute node, directly use the getAttribute method:

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

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

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

Attributes are dynamically updated as attribute nodes are added or removed.
A property is a property. If you treat a DOM element as a normal Object, then a property is a property stored in an Object in the form of a name-value pair (name= "value"). It's much easier to add and remove properties, just like a normal object:

elem.gameid = 880; //  add 
console.log( elem.gameid ) //  To obtain 
delete elem.gameid //  delete 

The reason why attributes and properties are easy to mix 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 properties, which can be accessed and modified by either method.

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, there is no relationship.

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 attributes and properties:

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

Many novice friends can easily fall into this pit.
Some attribute nodes that are common by default have property properties corresponding to them. Some properties with Boolean values are special, such as some form elements:

<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, the value of the corresponding property is true only if the node exists, such as:

<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 attributes from properties, it can be basically concluded that attribute nodes are visible in HTML code, and property is just a common name-value pair attribute.