html 中的属性(property)以及DOM对象中的attributes的详解
先来讲讲今天的主题： 探索property(也就是html的某些属性，比如input的value id这些自带属性）和attributes(html中能看到的所有属性，包括自定义属性)的差异
先来讲讲本"勃主"对这两个玩意的定义：
property: 指的是html 标签自带的属性，比如input 的value，id这些特有的属性，也就是说在w3c标准里面有提到的属性
attributes:指的是html标签上面的所有属性，包括自定义属性，比如：data属性，mydata属性，daye属性。。。。。
那他们有什么不同呢：
property:
这个属性是直接作为dom对象的子属性，可以直接访问，例如：
<input type="text" id="test" value="1" peopleName="nidaye">var testObj=document.getElementById("test");
value属性是属于property属性，所以可以这样访问：testObj.value=>1;
peopleName是自定义属性，testObj.peopleName=>null 这样是获取不到值的，那要怎么获取呢？要这样获取
testObj.attributes.peopleName.peopleName="nidaye"; 这样才能获取到的
这也说明了存放的地方不一样，自定义属性是存放在一个叫attributes的对象里面的
但是，property对象在不在这个attributes对象里面呢，试试就知道了
testObj.attributes.value.value=1;明显也在这里
注意，不同点一：存在dom对象中的位置不一样，一个是作为dom对象的属性，而且在attributes属性对应的对象里面也同样存在，而另一个只存在dom对象的attributes属性对应的对象中
生命不息，折腾不止，我们继续：
在input中输入123，然后分别访问dom对象的value值和在attributes.value.value的值，结果如下：
testObj.value=123; //testObj.value属性值已经跟着变化了
testObj.attributes.value.value=1;//是不是开始怀疑人生了，居然是1，没错，这个就是他们的第二个不同
property的值跟着input的输入改变而改变，也就是说它和页面上的value是同步的，而且attributes中的值并不会改变，可以这么理解，这里面存放的就是html属性的初始值，如果没有经过代码强制修改的话
注意，不同点二：property的值会同步html上的属性值，而且attributes里面的值只能通过代码进行修改，可以理解为attributes里面的数据时初始化数据
生命不息，折腾继续：
如果我们通过代码改变property的值那页面上的显示以及attributes里面的值会怎样，或则我们通过代码改变attributes里面的值，property的值和页面上的值会怎样？
带着一系列问题继续折腾：
testObj.value=456; 发现页面上的改了 ，testObj.attributes.value.value 的值并没有变化，
testObj.value的就肯定改了（如果你刚好想问这个，那你可以怀疑人生了）
修改attributes里面的值：
testObj.attributes.value.value=789;发现页面上没有改，那自然就能想到testObj.value也肯定没有改是吧
注意，不同点三:property的值页面显示的值双向绑定，而attributes里面的值不会，而且半单向绑定，因为只有初始化时候的值会绑定到attributes里面。
也有一个共同点，就是通过代码修改的不管是property还是attributes里面的值，都没有办法影响到对方。
好了，以上就是这两个概念的详解，如果有人说这有啥用，那我只能呵呵，在没有卖家的时候，钱也是没有用的，哈哈哈哈。。。。。
额外福利：爱过jq的屌丝都知道，jq设置和获取属性值有两个方法：
1.$().prop("name","nidaye");
2.$().attr("name","woshinidaye");
这两个方法有啥不一样呢，看上面就知道了
prop==>property
attr-attributes
智商不低于120的都知道啦，两个方法的不同点就是操作的是property属性还是attributes属性：
$("#test").prop("value");=>1;
$("#test").attr("value");=>1;
现在两个获取到的都是一样的：
然后：
$("#test").prop("value",2); input的显示值变成2
$("#test").prop("value");=>2;//傻的都知道会变啦
$("#test").attr("value");=>1;//这个不变
$("#test").prop("value");=>2;//傻的都知道会变啦
$("#test").attr("value");=>3;//这个不变
总结：一看结果就是到，他们的不同之处在于prop操作的是property属性，而attr操作的是attributes里面的属性，而且不会反映在页面上，如果这时候还不知道什么时候用
prop，什么时候用attr，那我也没办法了（还是告诉你吧，value这些要把修改显示在页面上的属性操作用prop，peopleName这些乱七八糟的自定义属性用attr获取和设置）
如果你觉得我写的玩意对你有一点帮助，让你对世界的认知又多了一点给我赞一个啊，好让我有动力继续鲁更多的东西出来献世
