前端雜談: Attribute VS Property

時間 2019-12-05

標籤前端雜談 attribute property 简体版

原文原文鏈接

前端雜談: Attribute VS Property

第一個問題: 什麼是 attribute & 什麼是 property ?

attribute 是咱們在 html 代碼中常常看到的鍵值對, 例如:javascript

<input id="the-input" type="text" value="Name:" />

上面代碼中的 input 節點有三個 attribute:html

id : the-input
type : text
value : Name:

property 是 attribute 對應的 DOM 節點的對象屬性 (Object field), 例如:前端

HTMLInputElement.id === 'the-input'
HTMLInputElement.type === 'text'
HTMLInputElement.value === 'Name:'

第二個問題:

從上面的例子來看, 彷佛 attribute 和 property 是相同的, 那麼他們有什麼區別呢?html5

讓咱們來看另外一段代碼:java

<input id="the-input" type="typo" value="Name:" /> // 在頁面加載後,
咱們在這個input中輸入 "Jack"

注意這段代碼中的 type 屬性, 咱們給的值是 typo, 這並不屬於 input 支持的 type 種類.git

讓咱們來看看上面這個 input 節點的 attribute 和 property:github

// attribute still remains the original value
input.getAttribute('id') // the-input
input.getAttribute('type') // typo
input.getAttribute('value') // Name:

// property is a different story
input.id // the-input
input.type //  text
input.value // Jack

能夠看到, 在 attribute 中, 值仍然是 html 代碼中的值. 而在 property 中, type 被自動修正爲了 text, 而 value 隨着用戶改變 input 的輸入, 也變動爲了 Jack微信

這就是 attribute 和 Property 間的區別:post

attribute 會始終保持 html 代碼中的初始值, 而 Property 是有可能變化的.spa

其實, 咱們從這兩個單詞的名稱也能看出些端倪:

attribute 從語義上, 更傾向於不可變動的

而 property 從語義上更傾向於在其生命週期中是可變的

Attribute or Property 能夠自定義嗎?

先說結論: attribute 能夠 property 不行

咱們能夠嘗試在 html 中自定義 attribute:

<input value="customInput" customeAttr="custome attribute value" />

而後咱們嘗試獲取自定義的屬性:

input.getAttribute('customAttr') // custome attribute value
input.customAttr // undefined

能夠看到, 咱們可以成功的獲取自定義的 attribute, 可是沒法獲取 property.

其實不難理解, DOM 節點在初始化的時候會將html 規範中定義的 attribute 賦值到 property 上, 而自定義的 attribute 並不屬於這個氛圍內, 天然生成的 DOM 節點就沒有這個 property.

一些補充

須要注意, 有一些特殊的 attribute, 它們對應的 Property 名稱會發生改變, 好比:

for (attr) => htmlFor (prop)
class (attr) => className (prop)

(若是咱們追到 DOM 的源碼中, 應該是能列出一份清單的: 哪些 attribute 的名稱會對應到哪些 Property, 感興趣不妨試試)

關於 attribute 和 property 二者之間的差異, stackoverflow 上有一些頗有意思的討論:

https://stackoverflow.com/a/6...

其中有些人認爲 attribute 的值表示的是 defaultValue, 而 DOM 節點的 Property 則是另外一回事. 好比: check (attr) 對應的是 defaultChecked (prop), value(attr) 對應的應該是 defaultValue (prop)

關於咱們在 attribute 中 value 的限制 (如 input 的 type 有那些有效值), 能夠參考這個連接:

https://www.w3.org/TR/html5/i...