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').attr('value',3); input的显示值还是2

$('#test').prop('value');=>2;//傻的都知道会变啦

$('#test').attr('value');=>3;//这个不变



总结：一看结果就是到，他们的不同之处在于prop操作的是property属性，而attr操作的是attributes里面的属性，而且不会反映在页面上，如果这时候还不知道什么时候用

prop，什么时候用attr，那我也没办法了（还是告诉你吧，value这些要把修改显示在页面上的属性操作用prop，peopleName这些乱七八糟的自定义属性用attr获取和设置）

如果你觉得我写的玩意对你有一点帮助，让你对世界的认知又多了一点给我赞一个啊，好让我有动力继续鲁更多的东西出来献世