The attribute and property of the DOM element are easy to mix together and cannot be distinguished. The two are different things, but the two are closely related. Many new friends, including me in the past, often don’t understand it.
attribute is translated into the Chinese term "characteristics", and property is translated into the Chinese term "attribute". From the literal meaning of Chinese, there is indeed a little difference. Let's talk about attribute first.
attribute is a feature node. Each DOM element has a corresponding attributes attribute attribute to store all attribute nodes. attributes is a container of an array class. To be precise, it is NameNodeMap. In short, it is a container similar to an array but not quite the same as an array. Each numeric index of attributes stores an attribute node in the form of a name-value pair (name=”value”).
Copy the code as follows:<div id="box" gameid="880">hello</div>
The HTML code of the above div element includes class, id and custom gameid. These features are stored in attributes, similar to the following form:
Copy the code as follows:[, id="box", gameid="880" ]
You can access the attribute node like this:
The code copy is as follows:
var elem = document.getElementById( 'box' );
console.log( elem.attributes[0].name ); // class
console.log( elem.attributes[0].value ); // box
However, IE6-7 stores many things in attributes, and the access method above is different from the return results of the standard browser. Usually, you need to get an attribute node and use the getAttribute method directly:
Copy the code as follows: console.log( elem.getAttribute('gameid') ); // 880
To set an attribute node to use the setAttribute method, use removeAttribute to delete:
The code copy is as follows:elem.setAttribute('testAttr', 'testVal');
console.log( elem.removeAttribute('gameid') ); // undefined
Attributes will be dynamically updated as attribute nodes are added or removed.
property is a property. If the DOM element is regarded as an ordinary Object object, 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, and it is no different from ordinary objects:
The code copy is as follows:
elem.gameid = 880; // Add
console.log(elem.gameid) // Get
delete elem.gameid // Delete
The reason why attribute and property are easy to mix together is that many attribute nodes have a corresponding property attribute, such as the id and class of the div element above are both attributes and corresponding properties, which can be accessed and modified no matter which method is used.
The code copy 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.
The code copy 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:
The code copy is as follows:
console.log( elem.getAttribute('gameid') ); // 880
console.log( elem.gameid ); // 880
elem.areaid = '900';
console.log( elem.getAttribute('areaid') ) // 900
Many novices probably fall into this pit easily.
Some common attribute nodes of DOM elements have corresponding property attributes. What is more special is some properties with the value of Boolean type, such as some form elements:
The code copy 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 if this node exists, the corresponding property value is true, such as:
The code copy 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 attribute and property, it can be basically summarized that attribute nodes are visible in HTML code, and property is just an ordinary name-value pair attribute.
The code copy is as follows:
// Both gameid and id are attribute nodes
// id can also be accessed and modified through property
<div gameid="880" id="box">hello</div>
// areaid is just property
elem.areaid = 900;