摘要：在大多數的文章中，一般被翻譯為特性，被譯為屬性。但是，和并不總是一對一的關系。當修改特性時，屬性也會更新但是修改屬性后，特性卻還是原值。修改特性屬性也更新了修改屬性特性沒有更新非標準特性非標準特性并不會自動映射為屬性。

在大多數的文章中，attribute 一般被翻譯為“特性”，property 被譯為“屬性”。

把結論寫在最前面，如果你全都懂，后面就不用看了。

當我們書寫 HTML 代碼的時候，我們為 HTML 元素設置特性 ，例如：

我們寫了一個 input 標簽，并給他定義了 2 個特性 (id 和 value)。當瀏覽器解析這段代碼的時候，會把 html 源碼解析為 DOM 對象，確切的說是解析為 HTMLInputElement 對象。HTMLInputElement 的繼承關系是：

HTMLInputElement
  ↓
HTMLElement
  ↓
Element
  ↓
Node
  ↓
EventTarget
  ↓
Object

通過查看文檔會發現，HTMLInputElement 的原型上定義了很多屬性和方法，例如 form, name, type, alt, checked, src, value 等等，還有從 HTMLElement 繼承來的 id, title, clientTop 等等。

如果仔細找找，就不難發現其中就有我們為 input 標簽定義的特性：id 和 value。當瀏覽器解析網頁時，將 HTML 特性映射為了 DOM 屬性。

而 Element 類還有一個 attributes 屬性，里面包含了所有的特性。

但是，HTML attribute 和 DOM property 并不總是一對一的關系。

當瀏覽器解析完 HTML 后，生成的 DOM 是一個繼承自 Object 的常規 JavaScript 對象，因此我們可以像操作任何 JS 對象那樣來操作 DOM 對象。

const el = document.getElementById("name")
el.foo = "bar"
el.user = { name: "jjc", age: "18"}

也可以為其添加方法。如果你想給每個 html 元素都添加屬性或方法，甚至可以直接修改 Element.prototype，不過我們不推薦這么做。

和 DOM 屬性類似，除了那些規范里定義的標準特性外，HTML 也可以添加非標準的屬性，例如：

當 HTML 特性映射為 DOM 屬性時，只映射標準屬性，訪問非標準屬性將得到 undefined。

const el = document.getElementById("name")
el.foo === undefined

好在 DOM 對象也提供了操作特性的 API：

Element.hasAttribute(name) – 判斷某個特性是否存在

elem.getAttribute(name) – 獲取指定特性的值

elem.setAttribute(name, value) – 設置指定特性的值

elem.removeAttribute(name) – 移除指定特性

以上 API 定義在 Element 上。

根據 HTML 規范，標簽以及特性名是不區分大小寫的，因此以下代碼是一樣的：

el.getAttribute("id")
el.getAttribute("ID")
el.getAttribute("iD")

并且，特性永遠都是字符串或 null。如果我們為特性設置非字符串的值，則引擎會將此值轉換為字符串。屬性是具有類型的：

el.getAttribute("checked") === "" // 特性是字符串
el.checked === false              // 屬性是 boolean 類型的值

el.getAttribute("style") === "color:blue" // 特性是字符串
typeof el.style === "object"                 // 屬性是 CSSStyleDeclaration 對象

即使都是字符串，屬性和特性也可能不同，有一個例外就是 href：

el.getAttribute("href") === "#tag" // 特性原樣返回 html 設置的值
el.href === "http://jjc.fun#tag"   // 屬性返回解析后的完整 uri

當標準的特性更新時，對應的屬性也會更新；反之亦然。

但是 input.value 的同步是單向的，只是 attribute --> property。當修改特性時，屬性也會更新；但是修改屬性后，特性卻還是原值。

el.setAttribute("value", "jjc");  // 修改特性
el.value === "jjc"                // 屬性也更新了  

el.value = "newValue";            // 修改屬性 
el.getAttribute("value")) === "jjc" // 特性沒有更新

非標準 HTML 特性并不會自動映射為 DOM 屬性。當我們使用 data- 開頭的特性時，會映射到 DOM 的 dataset 屬性。中劃線格式會變成駝峰格式：

el.setAttribute("data-my-name", "jjc");
el.dataset.myName === "jjc"

el.setAttribute("data-my-AGE", 18);
el.dataset.myAge === "18"

HTML 允許我們自定義標簽，也可以擴展標簽的特性，但是我們推薦使用已經進入 HTML5 規范的自定義特性 data-*。比如我們想為 div 標簽增加一個 age 特性，我們可以有 2 種選擇：

justjavac
justjavac

雖然第一種代碼更短，但是卻有一個潛在的風險。因為 HTML 規范是一直發展變化的，也許在未來的某個版本中，age 被添加進了標準特性里面，這將會引起潛在的 bug。

閱讀原文：HTML attribute 和 DOM property
討論地址：#15
如果你想參與討論，請點擊這里