因为一直不知道attribute和property的区别，所以做了例子，进行了总结。
一、基本概念区别
attribute:html标记上的属性和自定义属性，如id、class和value，其值只能是字符串。 此属性有三种相关方法： setAttribute、getAttribute和removeAttribute；注意：在使用setAttribute的时候，该函数一定接收两个参数，setAttribute（attributeName,value）,无论value的值是什么类型都会编译为字符串类型。在html标签中添加属性，本质上是跟在标签里面写属性时一样的，所以属性值最终都会编译为字符串类型。
property:js获取的DOM对象上的属性值。 例如，a可能被认为是基本的js对象。 该节点包含许多属性，如value、className和多种方法onclik。 图：
从上图中可以看到，一个js对象有许多属性。 此集合名称为properties，properties包含许多其他property和attributies，attributies包含许多attribute。
另一方面，常用的attribute，例如id、class、name等一般作为property被附加到js对象中，而且可以像property一样具有值和分配值。二、差异
1、value属性
我们先测试一下
html
输入类型=' text ' name=' test name ' class=' test class ' cc=' 111 ' id=' testin pt ' value=' 123 ' /我们输出的结果就是这样
浏览器渲染如下所示
虽然没有错
在input输入框中输入值时
接下来，我刚使用console.log输出
我们只输入属性的值，并发现属性的值不会更改，使用age.value=’45’时再次获取属性的值不会发送更改。 那么，我要改变attribute的值吗？ 特性不会改变吗？ 不，测试结果如下。
总之，attribute的value值仅在初始化时与property一样，使用getAttribute获取的值为初始化时的值，如果没有设置则为yes，使用setAttribute方法手动获取
属性的值是input实时输入的值，更改该值也不会影响属性。
三、name.id,class等属性
html
input type=' text ' name=' test name ' class=' test class ' cc=' 111 ' id=' testin pt ' value=' 123 ' /输出结果
从上面可以看到，属性和属性的值相同。 那么，试着改变一下吧。
使用seta属性：
由于发现如果使用setAttribute更改属性值，则在检索property并获取相对值时也会更改，因此，如果使用property更改值，请测试与attribute对应的值是否会更改
(注意：在js中，class是保留字，因此在使用property获取class值时可能使用className。)
如果在更改id时发生自我责任或错误，则表示id已更改，无法再使用原始id获取该节点。
总的来说，对于class、id、name、等属性，无论哪一个发生变化都是相互影响的。
四、对于新增加的属性
当属性添加新属性时
当attribute添加新属性时
总结：添加的属性不会影响其他人。
五、hidden、disabled等属性
总的来说，1、属性隐藏属性影响属性隐藏；
2、除非attribute的隐藏项为null (如果在html标记中写hidden或hidden=xxx，则property最终编译为true ) )；
3、使用removeAttribute函数删除隐藏时，attribute为null，显示输入；
4 .如果属性隐藏设置为false，则属性也为null
**
注：向代码中添加隐藏属性的效果与使用testInpt.hidden=true的效果相同。
但是，attribute属性在输出时为空，因为只有一个属性名称hidden且没有值
更改attribute属性的值不会影响属性的更改，但如果删除attribute隐藏，property隐藏将设置为false。 也就是说，hidden属性的默认值**
总结： 1、属性和属性es都是属性的子集，每个属性是属性es的子集； 2、attribute可以理解为特性，可以定制。 直接添加到html标签与在setAttribute中添加一致。 也就是说，添加到html标记的都是attribute属性，property使用xx .属性进行更改。 通常，更改会相互影响(4、某些特殊属性需要特殊处理。