The difference between attribute and property_html/css_WEB-ITnose

　

It is easy to mix attributes and properties of DOM elements together, making it unclear. The two 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 attributes 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").

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

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:

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

You can access the attribute node like this:

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

But IE6-7 stores many things in attributes, the above access The method returns different results than the standard browser. Usually, to obtain an attribute node, use the getAttribute method directly:

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

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

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:

elem.gameid = 880; // 添加console.log( elem.gameid ) // 获取delete elem.gameid // 删除

The reason why attributes and properties are easy to mix together is that there are many attribute nodes There is also a corresponding property attribute. For example, the id and class of the div element above are both attributes and corresponding properties. They can be accessed and modified no matter which method is used.

console.log( elem.getAttribute('id') ); // boxconsole.log( elem.id ); // boxelem.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.

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

It is estimated that many novice friends will find it easy Fall into this pit.

Some default common attribute nodes of DOM elements have corresponding property attributes. The special ones are some properties whose values ​​are 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, as long as the node exists, the corresponding property value is true, such as:

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

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

// gameid和id都是attribute节点// id同时又可以通过property来访问和修改<div gameid="880" id="box">hello</div>// areaid仅仅是propertyelem.areaid = 900;

Reprinted from: Rainy Night with Knife's Blog