attribute和property的区别

1、attribute

• 是html标签上的属性

• attribute特性由HTML定义，所有出现在HTML标签内的描述节点都是attribute特性。

• 类型只能是字符串
  访问：
  1、getAttribute()-取某一个属性。其他方法点这里

  var attr = document.getElementById('one').getAttribute('class') 
  

  2、 attributes所有DOM的属性集合，NamedNodeMap

  var attr = document.getElementById('one').attributes.clss
  //.class表示获取该对象中class属性
  

2、property

• 属于DOM对象

• 包含DOM节点属性(比如id，class)，DOM的实质就是js中的对象

• 可以是任意类型
  (▲!这里的property可以是任意类型指的是我们为DOM对象自定义添加的属性，对于DOM对象的原始属性，类似name属性，无论我们设置什么类型的值，最后返回的都是字符类型。）
  访问property
  直接用DOM获取，操作DOM的就是property

  var ele = document.getElementById('one')
  console.log(ele.id) //property中的id
  ele.id="two" //property  操作DOM使其id变为two
  

总结

除了value属性之外，非自定义的attribute和property有1:1映射关系， 当其中一个改变，另一个也会改变。value属性attribute可以影响property，反之则不行。（对于各自自定义的属性，它们之间就没有映射关系了，比如这个例子：

<div id="test" class="button" foo="1"></div>
document.getElementById('test').foo;    // return undefined 因为foo是一个自定义的attr特性

  ▲!document===对DOM的操作，所以是property的属性

注：

1、 非自定义的attribute和property有1:1映射关系， 比如 id class title
▲!当我们通过property属性进行设置或获取class时，需要使用"className"，因为在js中class是关键字。

2、 非自定义的property（attribute）改变的时候，其对应的attribute（property）在多数情况下也会改变。
例外情况见3

3、 当对应的property改变的时候，attribute特性value的值一直未默认值，并不会随之改变
▲!这条特性意味着我们平时在写业务的时候多数情况下使用property是正确的。当用户input输入更改的
时候，attribute-value值不会变化，即使js更改value(property)，也不会使attribute变化。
4、 一些为Boolean类型的属性，如一些表单元素，attribute，property的值不一样