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

2019独角兽企业重金招聘Python工程师标准>>>

前段时间，观看了WTP的一篇文章“DOM的attribute和property”，觉得写的很好，感谢WTP的作者---玉伯.

然后，我又在网上查询了些资料（国内外人写的心得），觉得有篇写的很好，推荐下

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

里面解释到了关于attribute与property的区别，写的很好，我就不再深入了。

首先我们先看WTP给的一个小例子；

html代码

我们先看看取值；

然后我将输入框里面的值修改下；

再看看取值：

很奇怪！为什么他们两个值是不同的呢？？？？？？（tell me why!!!）

其实就是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自带的属性就共享了。。。

大家有什么好的建议或者想法：大胆的提出来吧！大家交流交流心得。。。

转载于:https://my.oschina.net/bosscheng/blog/125833

对于DOM的attribute和property的一些思考相关推荐

JavaScript DOM 4 - 属性 attribute vs property
1: 获取网页元素的属性值 HTML里面的标签,都有一些属性(attribute),比方: <img src="http://www.abc.com/logo.png" cl ...
属于attribute还是property。
在获取比较值的时候会用in来判断是否可以用[x]方式,其实是判断该属性是属于attribute还是property. 那attribute和property到底是什么呢,有什么区别呢?这个或许很多人都 ...
Attribute和Property的区别
Attribute和Property的区别 attribute是XML元素中的概念,用于描述XML标签的附加信息,即XML标签的属性,property是JavaScript对象中的概念,用于描述Jav ...
java中类图概念,程序员眼中的UML(4)--类图释疑之一，Attribute和Property之区别
程序员眼中的UML(4) --类图释疑之一,Attribute和Property之区别上一篇中提出了很多问题,其中最令人费解的可能就是Attribute和Property之区别了吧.我在网络上寻找良 ...
java中的variable是什么,Java POJO中的field，variable，attribute和property有什么区别？
从这里: http : //docs.oracle.com/javase/tutorial/information/glossary.html 领域一个类的数据成员. 除非另外指定,否则字段不是静态 ...
Web前端面试题整合，持续更新【可以收藏】
饭后闲来无事,把这几年带学生用的一些面试题整合一下,供上!拿走,不客气!应付一般公司的二面基本上是够用了.祝你早日拿到心仪的offer. css相关 1. 万能居中 1.margin: 0 auto; ...
一个简单的例子学习 HTML 元素property和attribute的区别
源代码: <html> <style> </style><button disabled>Click</button> <button ...
JavaScript 中 Property 和 Attribute 的区别
转自:http://www.cnblogs.com/elcarim5efil/p/4698980.html property 和 attribute非常容易混淆,两个单词的中文翻译也都非常相近(pro ...
attribute property --- jquery attr() prop()
看了http://www.cnblogs.com/aaronjs/p/3387906.html ,总结下: attribute: 特性直接写在标签上的属性,可以通过setAttribute.getA ...

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

对于DOM的attribute和property的一些思考相关推荐

最新文章

热门文章