After the changes made in jQuery 1.6.1, I have been trying to define the difference between properties and attributes in HTML.
Looking at the list on the jQuery 1.6.1 release notes (near the bottom), it seems one can classify HTML properties and attributes as follows:
Properties: All which either has a boolean value or that is UA calculated such as selectedIndex.
Attributes: 'Attributes' that can be added to a HTML element which is neither boolean nor containing a UA generated value.
Thoughts?
When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.
For instance, this HTML element:
<input type="text" value="Name:">
has 2 attributes (type and value).
Once the browser parses this code, a HTMLInputElement object will be created, and this object will contain dozens of properties like: accept, accessKey, align, alt, attributes, autofocus, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight, etc.
For a given DOM node object, properties are the properties of that object, and attributes are the elements of the attributes property of that object.
When a DOM node is created for a given HTML element, many of its properties relate to attributes with the same or similar names, but it's not a one-to-one relationship. For instance, for this HTML element:
<input id="the-input" type="text" value="Name:">
the corresponding DOM node will have id,type, and value properties (among others):
The id property is a reflected property for the id attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. id is a pure reflected property, it doesn't modify or limit the value.
The type property is a reflected property for the type attribute: Getting the property reads the attribute value, and setting the property writes the attribute value. type isn't a pure reflected property because it's limited to known values (e.g., the valid types of an input). If you had <input type="foo">, then theInput.getAttribute("type") gives you "foo" but theInput.type gives you "text".
In contrast, the value property doesn't reflect the value attribute. Instead, it's the current value of the input. When the user manually changes the value of the input box, the value property will reflect this change. So if the user inputs "John" into the input box, then:
theInput.value // returns "John"
whereas:
theInput.getAttribute('value') // returns "Name:"
The value property reflects the current text-content inside the input box, whereas the value attribute contains the initial text-content of the value attribute from the HTML source code.
So if you want to know what's currently inside the text-box, read the property. If you, however, want to know what the initial value of the text-box was, read the attribute. Or you can use the defaultValue property, which is a pure reflection of the value attribute:
theInput.value // returns "John"
theInput.getAttribute('value') // returns "Name:"
theInput.defaultValue // returns "Name:"
There are several properties that directly reflect their attribute (rel, id), some are direct reflections with slightly-different names (htmlFor reflects the for attribute, className reflects the class attribute), many that reflect their attribute but with restrictions/modifications (src, href, disabled, multiple), and so on. The spec covers the various kinds of reflection.
After reading Sime Vidas's answer, I searched more and found a very straight-forward and easy-to-understand explanation in the angular docs.
HTML attribute vs. DOM property
-------------------------------
Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).
A few HTML attributes have 1:1 mapping to properties.
idis one example.Some HTML attributes don't have corresponding properties.
colspanis one example.Some DOM properties don't have corresponding attributes.
textContentis one example.Many HTML attributes appear to map to properties ... but not in the way you might think!
That last category is confusing until you grasp this general rule:
Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.
For example, when the browser renders
<input type="text" value="Bob">, it creates a corresponding DOM node with avalueproperty initialized to "Bob".When the user enters "Sally" into the input box, the DOM element
valueproperty becomes "Sally". But the HTMLvalueattribute remains unchanged as you discover if you ask the input element about that attribute:input.getAttribute('value')returns "Bob".The HTML attribute
valuespecifies the initial value; the DOMvalueproperty is the current value.
The
disabledattribute is another peculiar example. A button'sdisabledproperty isfalseby default so the button is enabled. When you add thedisabledattribute, its presence alone initializes the button'sdisabledproperty totrueso the button is disabled.Adding and removing the
disabledattribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing<button disabled="false">Still Disabled</button>.Setting the button's
disabledproperty disables or enables the button. The value of the property matters.The HTML attribute and the DOM property are not the same thing, even when they have the same name.
The answers already explain how attributes and properties are handled differently, but I really would like to point out how totally insane this is. Even if it is to some extent the spec.
It is crazy, to have some of the attributes (e.g. id, class, foo, bar) to retain only one kind of value in the DOM, while some attributes (e.g. checked, selected) to retain two values; that is, the value "when it was loaded" and the value of the "dynamic state". (Isn't the DOM supposed to be to represent the state of the document to its full extent?)
It is absolutely essential, that two input fields, e.g. a text and a checkbox behave the very same way. If the text input field does not retain a separate "when it was loaded" value and the "current, dynamic" value, why does the checkbox? If the checkbox does have two values for the checked attribute, why does it not have two for its class and id attributes? If you expect to change the value of a text *input* field, and you expect the DOM (i.e. the "serialized representation") to change, and reflect this change, why on earth would you not expect the same from an input field of type checkbox on the checked attribute?
The differentiation, of "it is a boolean attribute" just does not make any sense to me, or is, at least not a sufficient reason for this.
well these are specified by the w3c what is an attribute and what is a property http://www.w3.org/TR/SVGTiny12/attributeTable.html
but currently attr and prop are not so different and there are almost the same
but they prefer prop for some things
Summary of Preferred Usage
The .prop() method should be used for boolean attributes/properties and for properties which do not exist in html (such as window.location). All other attributes (ones you can see in the html) can and should continue to be manipulated with the .attr() method.
well actually you dont have to change something if you use attr or prop or both, both work but i saw in my own application that prop worked where atrr didnt so i took in my 1.6 app prop =)
Let's first look at the definitions of these words before evaluating what the difference is in HTML:
English definition:
In HTML context:
When the browser parses the HTML, it creates a tree data structure wich basically is an in memory representation of the HTML. It the tree data structure contains nodes which are HTML elements and text. Attributes and properties relate to this is the following manner:
It is also important to realize that the mapping of these properties is not 1 to 1. In other words, not every attribute which we give on an HTML element will have a similar named DOM property.
Furthermore have different DOM elements different properties. For example, an <input> element has a value property which is not present on a <div> property.
Let's take the following HTML document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- charset is a attribute -->
<meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
<title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>
Then we inspect the <div>, in the JS console:
console.dir(document.getElementById('foo'));
We see the following DOM properties (chrome devtools, not all properties shown):
class is reserved keyword in JS). But actually 2 properties, classList and className.Update to my answer this a citation from https://angular.io/guide/binding-syntax
HTML attributes and DOM properties
Attributes initialize DOM properties and you can configure them to modify an element's behavior, but Properties are features of DOM nodes.
A few HTML attributes have 1:1 mapping to properties; for example, id.
Some HTML attributes don't have corresponding properties; for example, aria-*.
Some DOM properties don't have corresponding attributes; for example, textContent.
Remember that HTML attributes and DOM properties are different things, even when they have the same name.
Example 1: an When the browser renders , it creates a corresponding DOM node with a value property and initializes that value to "Sarah".
<input type="text" value="Sarah">
When the user enters Sally into the , the DOM element value property becomes Sally. However, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns "Sarah".
The HTML attribute value specifies the initial value; the DOM value property is the current value.
Example 2: a disabled button A button's disabled property is false by default so the button is enabled.
When you add the disabled attribute, you are initializing the button's disabled property to true which disables the button.
<button disabled>Test Button</button>
Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why you cannot enable a button by writing Still Disabled.
To control the state of the button, set the disabled property instead.
Property and attribute comparison Though you could technically set the [attr.disabled] attribute binding, the values are different in that the property binding must be a boolean value, while its corresponding attribute binding relies on whether the value is null or not. Consider the following:
<input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
The first line, which uses the disabled property, uses a boolean value. The second line, which uses the disabled attribute checks for null.
Generally, use property binding over attribute binding as a boolean value is easy to read, the syntax is shorter, and a property is more performant.
