當初在學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>
這種寫法來啟用按鈕。
設置按鈕的disabled
property(如,通過 Angular 綁定)可以禁用或啟用這個按鈕。 這就是property 的價值。
就算名字相同,HTML attribute 和 DOM property 也不是同一樣東西。