完全区分html的attribute与dom的property

当初在学html时始终没有弄清楚的关于attribute与property的区别，居然在看angular文档时弄明白了。
angular官方文档的数据绑定一节提到html attribute与dom property的区别。

要想理解 Angular 绑定如何工做，重点是搞清 HTML attribute和 DOM property之间的区别。

attribute 是由 HTML 定义的。property是由 DOM (Document Object Model) 定义的。

• 少许 HTML attribute 和 property 之间有着 1:1 的映射，如id。

• 有些 HTML attribute 没有对应的 property，如colspan。

• 有些 DOM property 没有对应的 attribute，如textContent。

• 大量 HTML attribute看起来映射到了property…… 但却不像咱们想的那样！

最后一类尤为让人困惑…… 除非咱们能理解这个广泛原则：

attribute 初始化 DOM property，而后它们的任务就完成了。property的值能够改变；attribute的值不能改变。

例如，当浏览器渲染<input type="text" value="Bob">时，它将建立相应 DOM 节点， 其value的property被初始化为 “Bob”。

当用户在输入框中输入 “Sally” 时，DOM 元素的value 的property变成了 “Sally”。 可是这个 HTML value的attribute保持不变。若是咱们读取 input 元素的 attribute，就会发现确实没变： input.getAttribute('value') // 返回 "Bob"。

HTML attribute 中value指定了初始值；DOM value property 是当前值。

disabled这个attribute是另外一个古怪的例子。按钮的disabled的property 是false，由于默认状况下按钮是可用的。 当咱们添加disabled这个attribute时，只要它出现了按钮的disabled property就初始化为true，因而按钮就被禁用了。

添加或删除disabled attribute会禁用或启用这个按钮。但attribute 的值可有可无，这就是咱们为何无法经过 <button disabled="false">仍被禁用</button>这种写法来启用按钮。

设置按钮的disabledproperty（如，经过 Angular 绑定）能够禁用或启用这个按钮。 这就是property 的价值。

就算名字相同，HTML attribute 和 DOM property 也不是同同样东西。