With sobering to describe is not too much. Has been in operation using jQuery dom is if you use attr can not modify the value of the element, on the exchange prop, but never get to the bottom over reason. Today met the following description when read angular documents, people really suddenly.
HTML attribute vs. DOM property
The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.
Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).
-
A few HTML attributes have 1:1 mapping to properties.
id
is one example. -
Some HTML attributes don't have corresponding properties.
colspan
is one example. -
Some DOM properties don't have corresponding attributes.
textContent
is one example. -
Many HTML attributes appear to map to properties ... but not in the way we might think!
That last category can be especially confusing ... until we understand 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 a value
propertyinitialized to "Bob".
When the user enters "Sally" into the input box, the DOM element value
property becomes "Sally". But the HTML value
attribute remains unchanged as we discover if we ask the input element about that attribute: input.getAttribute('value') // returns "Bob"
The HTML attribute value
specifies the initial value; the DOM value
property is the current value.
The disabled
attribute is another peculiar example. A button's disabled
property is false
by default so the button is enabled. When we add the disabled
attribute, its presence alone initializes the button's disabled
property to true
so the button is disabled.
Adding and removing the disabled
attribute disables and enables the button. The value of the attribute is irrelevant, which is why we cannot enable a button by writing <button disabled="false">Still Disabled</button>
.
Setting the button's disabled
property (say, with an Angular binding) 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.
原文地址:https://angular.io/docs/ts/latest/guide/template-syntax.html
举个列子:我们都是用$('xxx').prop('checked',true)来选中checkbox,而不是$('xxx').attr('checked',true);后者没有作用的。正像上面文章说的attribute决定初始值,property决定当前值。