property 和 attribute 的區別

在前端工做中常常遇到property 和attribute兩個屬性，在中文中二者的翻譯是相同的，都是翻譯爲「屬性」，不少時候使用過程當中兩者也常常混淆，其實兩者是兩個不一樣的東西。

<-- 以此dom爲例子 -->
<input id='test' class='a b c' type='text' value="1234" />

一. 體系不一樣：DOM VS HTML

DOM ： 當咱們以dom的角度觀察這個input時，它是一個dom對象，是的，是一個對象，咱們知道每一個對象都有它屬性值，這些就是property屬性，id,type,disabled...這些就是此dom對象的property。

var test = document.querySelector('#test');
// 把test看做一個對象 
test.id       // test
test.type     // button
test.disabled // true
test.size     // 20
...

HTML : 在html中，全部的元素都是標籤，咱們能夠給每一個html標籤設置相應的屬性（attribute），這些屬性都保存在test.attributes裏面（發現了沒，attributes其實也是dom對象的一個property），因此對於這個input標籤，上面的id,class,type...等都是attribute屬性

var test = document.querySelector('#test');

// 把test看做一個標籤,打印它的屬性
console.log(test.attributes );
/* NamedNodeMap {0: data-v-230f5a58, 1: name, 2: value, 3: id, 4: disabled, 5: class, data-v-230f5a58: data-v-230f5a58, name: name, value: value, id: id, disabled: disabled, …}
length: 6
0: data-v-230f5a58
1: name
2: value
3: id
4: disabled
5: class
data-v-230f5a58: data-v-230f5a58
name: name
value: value
id: id
disabled: disabled
class: class
__proto__: NamedNodeMap

*/

二. 二者的區別

體系不一樣：根據上面的測試的結果咱們發現，兩者是屬於兩套系統的不一樣的東西，但其中的屬性又有所重合，且attributes自己又是property中的一個屬性。因此attribute的屬性通常均可以經過property 的方式獲取到。

來源不一樣：在Js 的世界中，對象是經過構造函數建立的，因此每一個對象中都天生自帶了許多屬性（property）, 而attribute則是咱們在書寫代碼時設置的一些屬性。

狀態不一樣：狀態這個描述可能不太準確，attribute是咱們給這個標籤設置的屬性，相似於這個標籤的默認或初始屬性值；而property 是這個dom對象或標籤如今的屬性。以這個input爲例，咱們設置的初始value值爲「1234」，若咱們輸入了其餘值如：「abcd」,此時property: input.value  的值爲「abcd」, attribute：input.attributes.value 的值仍爲 "1234"。固然不是因此的屬性是這樣，好比 id, class，type等屬性是始終保持一致的。

參考文章： https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#answer-6004028