attribute与property

https://www.cnblogs.com/zichi/p/4786455.html?utm_source=tuicool

1、Attribute
Attribute是HTML上设置的属性，在html中显式地设置，或者通过setAttribute()方法设置。
对于Attribute，它有三个常用的方法setAttribute()、getAttribute()以及removeAttribute()；
Attribute的属性值只能是字符串，属性键大小写不敏感
2、Property
DOM是JavaScript里的对象，Property是DOM中的属性，它的属性值主要通过点运算符来获取和改变。这个对象实现了很多属性（property）：‘value’，'className’等，以及一些方法getAttribute，setAttribute等，它也可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。
所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，每个HTML元素都有下面的这5个标准特性：id，title，lang，dir，className（在DOM中以property方式操作这几个特性会同步到html标签中）。所以即使在html中没有指定id、title等，也会默认赋予一个空串，通过property属性（点操作符）可以访问。而除此之外在html中设置的其他属性是不能通过Property访问到的（attribute特有的属性）。

很多attribute节点还有一个相对应的property属性，比如div元素的id和class既是attribute，也有对应的property（id和className），不管使用哪种方法都可以访问和修改，如果在TAG对这些属性进行赋值，那么这些值就会作为初始值赋给DOM的同名property。
用点操作符改变value值，并不会更新attribute的value值；而相反用attribute更新value值，却会反映到property上
4、总结
Attribute属性在html上设置，会反应在html代码上，两者同步；而Property属性则可以看做是DOM对象的键值对，用点操作符对它们进行操作。

实际编程中，基本上的DOM操作都是使用property的点操作符。

只有两种情况不得不使用attribute：

自定义HTML Attribute，因为它不能同步到DOM property上
访问内置的HTML标签的Attribute，这些attribute不能从property上同步过来，比如input标签的value值（可以用来检验input值是否变化）