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

attribute 是我們在 html 程式碼中經常看到的鍵值對, 例如:

<input id="the-input" type="text" value="Name:" />
複製程式碼

上面程式碼中的 input 節點有三個 attribute:

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

property 是 attribute 對應的 DOM 節點的 物件屬性 (Object field), 例如:

HTMLInputElement.id === 'the-input'
 

HTMLInputElement.type === 'text'
HTMLInputElement.value === 'Name:'
複製程式碼

第二個問題:

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

讓我們來看另一段程式碼:

<input id="the-input" type="typo" value="Name:" /> // 在頁面載入後,
我們在這個input中輸入 "Jack"
複製程式碼

注意這段程式碼中的 type 屬性, 我們給的值是 typo, 這並不屬於 input 支援的 type 種類.

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

// 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

這就是 attribute 和 Property 間的區別:

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

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

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 上有一些很有意思的討論:

stackoverflow.com/a/6377829/5…

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

關於我們在 attribute 中 value 的限制 (如 input 的 type 有那些有效值), 可以參考這個連結:

www.w3.org/TR/html5/in…

想了解更多 D3.js 和 資料視覺化 ?

這裡是我的 D3.js 、 資料視覺化 的 github 地址, 歡迎 star & fork :tada:

D3-blog

如果覺得本文不錯的話, 不妨點選下面的連結關注一下 : )

github 主頁

知乎專欄

掘金

想直接聯絡我 ?

郵箱: [email protected]

微信: