前段时间,观看了WTP的一篇文章“DOM的attribute和property”,觉得写的很好,感谢WTP的作者---玉伯.
然后,我又在网上查询了些资料(国内外人写的心得),觉得有篇写的很好,推荐下
里面解释到了关于attribute与property的区别,写的很好,我就不再深入了。
首先我们先看WTP给的一个小例子;
html代码
我们先看看取值;
然后我将输入框里面的值修改下;
再看看取值:
很奇怪!为什么他们两个值是不同的呢??????(tell me why!!!)
其实就是attribute和property在搞鬼。。。
再看看这篇文章,
对于attribute和property的解释都很好。
尤其是最后的总结,我很赞成。
我们再来看看玉伯对于两个的解释
attribute
input节点有很多属性(attribute):‘type’,'id','value','class'以及自定义属性,在DOM中有setAttribute()和getAttribute()读写DOM树节点的属性(attribute)
PS:在这里的getAttribute方法有一个潜规则,部分属性(input的value和checked)通过getAttribut取到的是初始值,这个就很好的解释了之前的n1为1。
Property
javascript获取到的DOM节点对象,比如a 你可以将他看作为一个基本的js对象,这个对象包括很多属性(property),比如“value”,“className”以及一些方法,setAttribute,getAttribute,onclick等,值得注意的是对象的value的属性(property)取值是跟着输入框内的当前值一起更新的,这解释了之前的n2为什么为1000了。
所有在日常的工作中,推荐是使用 property,这样事情处理起来比较简单一些,attribute永远是字符串。。
PS:关于自定义属性,对于浏览器的兼容性问题,大家自己去研究研究,小弟还没有研究会,就不作小结了。。。(有的注解不管你大小写,有的却分的很清楚)。。。
貌似chrome就不管你大小写。。。
接着我们来看看我们对于使用attribute和property自定义属性的时候的一些区别
可以看出,自定义的属性对于attribute和property是互不干扰的
但是对于DOM自带的属性就共享了。。。
大家有什么好的建议或者想法:大胆的提出来吧!大家交流交流心得。。。