DOM的attribute和property

Written on 2013/04/18 at 21:27 作者：NoahLu

 

DOM的attribute和property

归档于Javascript笔记10 条评论

 

今天讲一个JS的小话题，就是DOM节点的attribute和property的区别，这个点看起来很小，其实背后别有洞天。如果面试一个前端，听他讲讲对这个问题的理解，基本能分辨是不是菜鸟。下面的内容请各位细心体会。

页面有一个INPUT输入框

 

这个比较简单，没什么好说的，两个值都是’1′。现在我把输入框的值改成100，然后重新取一遍值：

为什么两个值不同了？这就是attribute和property在作怪。

Attibute

这个INPUT节点有很多属性（attribute）：’type’，’id’，’value’，’class’以及自定义的’data-explain’。Javascript的DOM模型提供了两个方法getAttribute()和setAttribute() 读写DOM树节点属性（attribute）值。注意这里的getAttribute()方法有个潜规则：部分特殊属性（比如INPUT的value和checked），getAttribute取到的是初始值，这就解释了修改输入框值为100后，v1取到的还是初始值’1′。

Property

Javascript获取到的DOM节点对象，比如a，你可以把它看作一个基本JS对象（尽管某些浏览器实现上并不完全是），这个对象实现了很多属性（property）：’value’，’className’等，以及一些方法还有前面说的getAttribute，setAttribute，onclick等。注意这个对象的’value’属性（property）取的值是输入框内的当前值。所以v2的值是’100′。

推荐大家尽量使用property，这样事情处理起来简单一下，attribute的值永远是字符串，比如：

另外，由于浏览器实现细节的差异，也存在一些坑，比如：在Chrome，Firefox及IE8之后，标签的attribute名是大小写不敏感的，DOM.setAttribute(‘myname’,'xxx’)可以通过DOM.getAttribute(‘MyName’)来取，另外在XHTML文档模式下，设置’tabIndex’为任意值会将’tabindex’值置为0。

对于attribute和property，jQuery中的实现其实挺纠结的，大家应该知道jQ的跟他们相关的三个方法 .attr()、.prop()以及.data()，这三个背后也有渊源，这个说开又是另一个话题，大家可以先自己思考，后面我再给大家分享。

转载于:https://www.cnblogs.com/schumi-lds/p/3954093.html