Difference between attribute and property

Source: Internet
Author: User

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="testBox", 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;









Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.