H5起步01之-----attributes&property

概念
attributes
在HTML中的每个标签节点对象上都会存在一个原生的attributes属性【即为property】，用于存放在标签上已经使用【html内联标签上的使用，如：<button name="pro">pro全选</button>中的name】的属性【预定义或自定义属性如：name="test"或nickName="buringSnow"】，或则在js中利用.setAttribute(name, value)所添加的属性。
property
每个标签节点对象上的原生方法和属性【注意的是，属性中包含所有此标签的预定义属性，值为默认，这就说明我们只能改变其值，却不能添加自定义属性】

问题一：既然都是表示属性，那浏览器到底是以谁为基准呢？
那我们首先具体来聊聊attributes

事实证明：attributes是一个属性集，其属性来源分为三种
01，内联HTML文档标签中
02，此集合的存储方法.setAttribute(name, value)
03，原生对象中直接属性property值的改变导致同步attributes
在上述的一，二两种是对attributes属性对象的直接操作，也不会发生什么问题；然而关于改动对象中直接属性property值间接所引起的attributes属性集中值的变化，则要分类考虑。

首先我们得知道属性分为两种属性
布尔值属性
非布尔值属性

关于非布尔值的同步问题
本人亲测：对于property的属性值的改变会同步到attributes属性集中，对于attributes属性集的直接操作的结果也会同步到property中。

关于布尔值属性
本人亲测：当没有对相应的布尔值类型的property值进行改动时，attributes相应的直接操作会同步到property中导致相应的property值的改变；对与property的直接操作【node.propertyName = value或则用户的操作】，则不会同步到attributes属性集中，且如若此时再对attributes做相应的直接操作不会同步到property改变其值。

结果表明：
浏览器会最终以property值作为渲染基准。
因为浏览器会首先遍历节点对象的直接属性值，【有没有发现不管同没同步，浏览器都是按照property值渲染】，所以就不存在遍历attributes的可能。

问题二，那attributes的存在意义是什莫呢？
想想attributes实则是一个NodeMap，Map代表什么，代表的是这种存储的效率一定相对于property高，可以这么理解，通过attributes可以高效的将非布尔值属性映射到property从而提高性能。然而至于布尔值属性为什莫不可以映射，还有待解决中…

结论
非布尔值属性：利用attribute
布尔值属性：直接操作property

ps:一点小东西
01，h5新增小功能1,将class名封装成集合classList
02，h5新增小功能2,将自定义属性data-*封装成集合【莫得相关方法】
03，h5新增小功能3,将自定义div内容是否可编辑，【属性contenteditable：false/true/inhert】