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