对于DOM的attribute和property的一些思考

前段时间,观看了WTP的一篇文章“DOM的attribute和property”,以为写的很好,感谢WTP的做者---玉伯. javascript

而后,我又在网上查询了些资料(国内外人写的心得),以为有篇写的很好,推荐下 html

http://omiga.org/blog/archives/2055 java

里面解释到了关于attribute与property的区别,写的很好,我就再也不深刻了。 chrome

首先咱们先看WTP给的一个小例子; 浏览器

html代码 spa



咱们先看看取值; .net


而后我将输入框里面的值修改下; htm

再看看取值: 对象


很奇怪!为何他们两个值是不一样的呢??????(tell me why!!!) blog

其实就是attribute和property在搞鬼。。。

再看看这篇文章http://www.blogjava.net/wxb_nudt/archive/2005/06/20/6409.html

对于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自带的属性就共享了。。。


你们有什么好的建议或者想法:大胆的提出来吧!你们交流交流心得。。。

相关文章
相关标签/搜索