[譯]HTML attribute與DOM property之間的區別？

2018.3.1更：

有贊·微商城部門招前端啦，最近的前端hc有十多個，跪求大佬扔簡歷，我直接進行內推實時反饋進度，有興趣的郵件 lvdada#youzan.com，或直接微信勾搭我 wsldd225 瞭解跟多

有贊開源組件庫·zanUI

---

原文：http://joji.me/en-us/blog/html-attribute-vs-dom-property

當咱們經過js處理DOM對象時很是容易將attribute（特性）和property（屬性）混淆。document.getElementById('test').getAttribute('id')，$('#test').attr('id'), document.getElementById('test').id還有$('#test').prop('id')三者都返回相同的id：「test」。這篇文章我將解釋attribute和property的區別。

Attribute（特性）

1. attribute特性由HTML定義，全部出如今HTML標籤內的描述節點都是attribute特性。

<div id="test" class="button" custom-attr="1"></div>
複製代碼

document.getElementById('test').attributes;
// return: [custom-attr="hello", class="button",   id="test"]
複製代碼

2. attribute特性的類型老是字符串類型。拿上邊的DIV爲例，document.getElementById('test').getAttribute('custom-attr') 或者$('#test').attr('custom-attr')老是返回字符串類型的"1"。

Property（屬性）

1. property屬性屬於DOM對象，DOM實質就是javascript中的對象。咱們能夠跟在js中操做普通對象同樣獲取、設置DOM對象的屬性，而且property屬性能夠是任意類型。

document.getElementById('test').foo = 1; // 設置屬性: foo 爲 number類型: 1
document.getElementById('test').foo; // 獲取屬性值, return number: 1
$('#test').prop('foo'); // 使用jquery獲取屬性值, return number: 1
複製代碼

$('#test').prop('foo', {
   age: 23,
   name: 'John'
}); // 使用jquery設置一個名爲foo的對象
document.getElementById('test').foo.age; // return number類型: 23
document.getElementById('test').foo.name; // return string類型: "John"
複製代碼

**譯者注：**這裏的property能夠是任意類型指的是咱們爲DOM對象自定義添加的屬性，對於DOM對象的原始屬性，相似name屬性，不管咱們設置什麼類型的值，最後返回的都是字符類型。

另外，咱們獲取HTML5定義的data屬性時，獲取的值也是字符串。<div data-id="33"></div>,ele.dataset.id // string 33

2. 非自定義的attribute特性與property有1:1的映射關係，好比：id，class，title等。

<div id="test" class="button" foo="1"></div>
複製代碼

document.getElementById('test').id; // return string: "test"
document.getElementById('test').className; // return string: "button"
document.getElementById('test').foo; // return undefined 由於foo是一個自定義的attr特性
複製代碼

注意：當咱們經過property屬性進行設置或獲取class時，咱們須要使用**"className"**，由於在js中class是關鍵字。

**譯者注：**第二點的意思是說當咱們在html中寫非自定義的attribute特性時，DOM對象會自動映射對應的property

3. 非自定義的property（attribute）改變的時候，其對應的attribute（property）在多數狀況下也會改變。

<div id="test" class="button"></div>
複製代碼

var div = document.getElementById('test');
   div.className = 'red-input';
   div.getAttribute('class'); // return string: "red-input"
   div.setAttribute('class','green-input');
   div.className; // return string: "green-input"
複製代碼

4. 當對應的property改變的時候，attribute特性value的值一直未默認值，並不會隨之改變。

<input id="search" value="foo" />
複製代碼

var input = document.getElementById('search');
input.value = 'foo2';
input.getAttribute('value'); // return string: "foo"
複製代碼

**譯者注：**這條特性意味着咱們平時在寫業務的時候多數狀況下使用property是正確的。當用戶input輸入更改的時候，attribute-value值不會變化，即便js更改value，也不會使attribute變化。這也驗證了第三點的。

5. 最佳實踐

在javascript中咱們推薦使用property屬性由於這個屬性相對attribute更快，更簡便。尤爲是有些類型本該是布爾類型的attribute特性。好比："checked", "disabled", "selected"。瀏覽器會自動將這些值轉變成布爾值傳給property屬性。

<input id="test" class="blue" type="radio" />
複製代碼

好實踐

// get id
document.getElementById('test').id;
// set class
document.getElementById('test').className = 'red';
// get and set radio control status
document.getElementById('test').checked; // boolean 
document.getElementById('test').checked = true;
$('#test').prop('checked'); // boolean
$('#test').prop('checked', true);
複製代碼

壞實踐

// get id
document.getElementById('test').getAttribute('id');
// set class
document.getElementById('test').setAttribute('class', 'red');
document.getElementById('test').getAttribute('checked'); //  返回字符串類型 'checked'

複製代碼

本文來自二口南洋，有什麼須要討論的歡迎找我。