摘要：在大多數(shù)的文章中，一般被翻譯為特性，被譯為屬性。但是，和并不總是一對(duì)一的關(guān)系。當(dāng)修改特性時(shí)，屬性也會(huì)更新但是修改屬性后，特性卻還是原值。修改特性屬性也更新了修改屬性特性沒有更新非標(biāo)準(zhǔn)特性非標(biāo)準(zhǔn)特性并不會(huì)自動(dòng)映射為屬性。

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

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

當(dāng)我們書寫 HTML 代碼的時(shí)候，我們?yōu)?HTML 元素設(shè)置特性 ，例如：

我們寫了一個(gè) input 標(biāo)簽，并給他定義了 2 個(gè)特性 (id 和 value)。當(dāng)瀏覽器解析這段代碼的時(shí)候，會(huì)把 html 源碼解析為 DOM 對(duì)象，確切的說是解析為 HTMLInputElement 對(duì)象。HTMLInputElement 的繼承關(guān)系是：

HTMLInputElement
  ↓
HTMLElement
  ↓
Element
  ↓
Node
  ↓
EventTarget
  ↓
Object

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

如果仔細(xì)找找，就不難發(fā)現(xiàn)其中就有我們?yōu)?input 標(biāo)簽定義的特性：id 和 value。當(dāng)瀏覽器解析網(wǎng)頁時(shí)，將 HTML 特性映射為了 DOM 屬性。

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

但是，HTML attribute 和 DOM property 并不總是一對(duì)一的關(guān)系。

當(dāng)瀏覽器解析完 HTML 后，生成的 DOM 是一個(gè)繼承自 Object 的常規(guī) JavaScript 對(duì)象，因此我們可以像操作任何 JS 對(duì)象那樣來操作 DOM 對(duì)象。

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

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

和 DOM 屬性類似，除了那些規(guī)范里定義的標(biāo)準(zhǔn)特性外，HTML 也可以添加非標(biāo)準(zhǔn)的屬性，例如：

當(dāng) HTML 特性映射為 DOM 屬性時(shí)，只映射標(biāo)準(zhǔn)屬性，訪問非標(biāo)準(zhǔn)屬性將得到 undefined。

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

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

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

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

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

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

以上 API 定義在 Element 上。

根據(jù) HTML 規(guī)范，標(biāo)簽以及特性名是不區(qū)分大小寫的，因此以下代碼是一樣的：

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

并且，特性永遠(yuǎn)都是字符串或 null。如果我們?yōu)樘匦栽O(shè)置非字符串的值，則引擎會(huì)將此值轉(zhuǎn)換為字符串。屬性是具有類型的：

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

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

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

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

當(dāng)標(biāo)準(zhǔn)的特性更新時(shí)，對(duì)應(yīng)的屬性也會(huì)更新；反之亦然。

但是 input.value 的同步是單向的，只是 attribute --> property。當(dāng)修改特性時(shí)，屬性也會(huì)更新；但是修改屬性后，特性卻還是原值。

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

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

非標(biāo)準(zhǔn) HTML 特性并不會(huì)自動(dòng)映射為 DOM 屬性。當(dāng)我們使用 data- 開頭的特性時(shí)，會(huì)映射到 DOM 的 dataset 屬性。中劃線格式會(huì)變成駝峰格式：

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

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

HTML 允許我們自定義標(biāo)簽，也可以擴(kuò)展標(biāo)簽的特性，但是我們推薦使用已經(jīng)進(jìn)入 HTML5 規(guī)范的自定義特性 data-*。比如我們想為 div 標(biāo)簽增加一個(gè) age 特性，我們可以有 2 種選擇：

justjavac
justjavac

雖然第一種代碼更短，但是卻有一個(gè)潛在的風(fēng)險(xiǎn)。因?yàn)?HTML 規(guī)范是一直發(fā)展變化的，也許在未來的某個(gè)版本中，age 被添加進(jìn)了標(biāo)準(zhǔn)特性里面，這將會(huì)引起潛在的 bug。

閱讀原文：HTML attribute 和 DOM property
討論地址：#15
如果你想?yún)⑴c討論，請(qǐng)點(diǎn)擊這里