HTML的attribute和DOM的property剖析（轉）

原文：https://www.jianshu.com/p/efc704d713c7

HTML attribute 與 DOM property 的對比

該文摘自angular的官方文檔，老外對概念的解釋仍是很到位和容易理解的

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>這種寫法來啓用按鈕。

設置按鈕的disabled property（如，經過 Angular 綁定）能夠禁用或啓用這個按鈕。 這就是 property 的價值。

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

延伸

對於angular而言，這句話很重要，得再強調一次：

模板綁定是經過 property 和事件來工做的，而不是 attribute。

在 Angular 的世界中，attribute 惟一的做用是用來初始化元素和指令的狀態。 當進行數據綁定時，只是在與元素和指令的 property 和事件打交道，而 attribute 就徹底靠邊站了。

做者：bluuus 連接：https://www.jianshu.com/p/efc704d713c7 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。