Difference between attribute and property: attributeproperty

Difference between attribute and property: attributeproperty

　　

Attributes and Properties of DOM elements are easily mixed and cannot be clearly divided. The two are different, but they are closely related. Many new friends, including me, may often be confused.

Attribute is translated into a Chinese term as "feature", and property is translated into a Chinese term as "attribute". From the literal meaning of Chinese, there is indeed a difference. let's first talk about attribute.

Attribute is a feature node. Each DOM element has a corresponding attributes attribute to store all attribute nodes. attributes is a class array container. The accurate point is NameNodeMap, in short, it is a container similar to an array but not the same as an array. Each digital index of attributes stores an attribute node in the form of a name-value Pair (name = "value.

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

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

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

You can access the attribute node as follows:

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

But the IE6-7 stores a lot of things in attributes, and the above access method is different from the results returned by the standard browser. The getAttribute method is usually used to obtain an attribute node:

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

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

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

Attributes is dynamically updated with the addition or deletion of attribute nodes.

Property is an attribute. If DOM elements are treated as common Object objects, property is an attribute stored in the Object in the form of name-value pairs (name = "value. It is much easier to add or delete a property. It is nothing different from a common object:

Elem. gameid = 880; // Add console. log (elem. gameid) // obtain delete elem. gameid // delete

Attribute and property are easily mixed together because many attribute nodes have a property attribute. For example, the id and class of the above div element are both attribute, there are also corresponding properties, which can be accessed and modified by any method.

console.log( elem.getAttribute('id') ); // boxconsole.log( elem.id ); // boxelem.id = 'hello';console.log( elem.getAttribute('id') ); // hello

However, for custom attribute nodes or custom properties, there is no relationship between the two.

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

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

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

Many new friends may easily fall into this trap.

Some common attribute nodes of DOM elements have corresponding property attributes. Some special properties with values of the Boolean type, such as some form elements:

<input type="radio" checked="checked" id="raido">var radio = document.getElementById( 'radio' );console.log( radio.getAttribute('checked') ); // checkedconsole.log( radio.checked ); // true

For these special attribute nodes, only this node exists, and the corresponding property value is true, for example:

<input type="radio" checked="anything" id="raido">var radio = document.getElementById( 'radio' );console.log( radio.getAttribute('checked') ); // anythingconsole.log( radio.checked ); // true

Finally, to better distinguish between attribute and property, we can basically conclude that attribute nodes are visible in HTML code, while property is just a common name-Value Pair attribute.

// Both gameid and id are attribute nodes // you can access and modify <div gameid = "880" id = "box"> hello </div> // areaid is just propertyelem. areaid = 900;

Reposted from: Rain night with knife's Blog