What is the difference between attribute and property? [closed]

Solution 1:

In general terms (and in normal English usage) the terms mean the same thing.

In the specific context of HTML / Javascript the terms get confused because the HTML representation of a DOM element has attributes (that being the term used in XML for the key/value pairs contained within a tag) but when represented as a JavaScript object those attributes appear as object properties.

To further confuse things, changes to the properties will typically update the attributes.

For example, changing the element.href property will update the href attribute on the element, and that'll be reflected in a call to element.getAttribute('href').

However if you subsequently read that property, it will have been normalised to an absolute URL, even though the attribute might be a relative URL!

Solution 2:

These words existed way before Computer Science came around.

1. Attribute is a quality or object that we attribute to someone or something. For example, the scepter is an attribute of power and statehood.

2. Property is a quality that exists without any attribution. For example, clay has adhesive qualities; i.e, a property of clay is its adhesive quality. Another example: one of the properties of metals is electrical conductivity. Properties demonstrate themselves through physical phenomena without the need to attribute them to someone or something. By the same token, saying that someone has masculine attributes is self-evident. In effect, you could say that a property is owned by someone or something.

To be fair though, in Computer Science these two words, at least for the most part, can be used interchangeably - but then again programmers usually don't hold degrees in English Literature and do not write or care much about grammar books :).

Solution 3:

An attribute is the actual thing that you use within your HTML tag like

<input type="checkbox" checked="checked" />

In this instance type and checked are attributes. The property though is the value of these attributes, which the browser saves inside the DOM element. Often the value of the attributes and the properties are equal, that's what makes it so confusing.

In this example the DOM element input has the property type with the value "checkbox" and the property checked with the value true (notice how this value differs from the value inside the HTML attribute).

Using Firebug you can observe the behaviour of properties when clicking on an element and selecting the "DOM view".