徹底區分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 也不是同一樣東西。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM