attribute: 特性
属于 html
attributes 是 HTML元素（标签）的属性。
只能是字符串，大小写不敏感
property: 属性
属于 js
property 是 DOM 对象的属性。
property的值可以是任何的数据类型，对大小写敏感
关系
property 是 attribute 对应的 DOM 节点的 对象属性 (Object field)
property是实时更新的
通常来讲，更改互相影响（value除外）
当添加新的非默认属性时，是不互通的；
一些特殊属性，则需要特殊对待（hidden，disable等）
1、attribute的hidden属性会影响property属性的hidden；
2、只要attribute的hidden不为null（当在html标签中写hidden 或者 hidden=xxx，property最终都会编译为true）;
3、当使用removeAttribute函数移除hidden的时候，attribute才为null，input才会显示；
4、当property的hidden设为false的时候，attribute也会为null
Attribute or Property 可以自定义吗?
先说结论: attribute 可以 property 不行
我们可以尝试在 html 中自定义 attribute:
<input value="customInput" customeAttr="custome attribute value" />
复制代码
然后我们尝试获取自定义的属性:
input.getAttribute('customAttr') // custome attribute value
input.customAttr // undefined
复制代码
可以看到, 我们能够成功的获取自定义的 attribute, 但是无法获取 property.
其实不难理解, DOM 节点在初始化的时候会将html 规范中定义的 attribute 赋值到 property 上, 而自定义的 attribute 并不属于这个氛围内, 自然生成的 DOM 节点就没有这个 property.
一些补充
需要注意, 有一些特殊的 attribute, 它们对应的 Property 名称会发生改变, 比如:
- for (attr) => htmlFor (prop)
- class (attr) => className (prop) 等...
