完全區分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 也不是同同樣東西。