前端雜談: Attribute VS Property

第一個問題: 什麼是 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: