DOM的attribute和property

今天讲一个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()，这三个背后也有渊源。

jQuery .attr() .prop() .data()

首先看看三个方法的解释：

先说.attr()和.prop()，在jq1.6版之前，没有.prop()方法，而.attr()混淆了attribute和property的概念，导致使用时不小心就会出现bug，如果不读jq源码，还真说不清楚.attr()设置的是attribute还是property。

至于jq为什么这样设计，众说纷纭。有人说jq开发团队自己也没搞清楚attribute和property的区别，也有人说这是过度设计，jq认为用户没必要了解attribute和property的区别，干脆封装到一起了。不管原因是什么，jq这个设计确实不好。

2011年5月份，jq在新版本1.6版中引入新的API .prop()方法，不过升级过程挺痛苦，1.6版对比1.5.2版在.attr()的引入上没有做好向下兼容，一些人升级jq到1.6之后，发现自己的代码挂了。紧接着jq发布1.6.1版解决了兼容问题。

对于加入 .prop() 方法，jq的解释是：首先，给一些DOM对象属性property（比如nodeName，selectedIndex）的获取提供了更简洁的方案，情况前后的对比：

// 不用 .prop()var elem = $("#foo")[0];if ( elem ) {    index = elem.selectedIndex;}// 用 .prop()index = $("#foo").prop("selectedIndex");

另外还有一个原因是.prop()的效率好于.attr()。

下 面说说.data()，我们知道html 5里面DOM标签可以加以一些data-xxx的属性，你可以把.data()看作是存取data-xxx这样DOM附加信息的方法。当 然，.data()存取的内容不仅是字符串，还可以包含数组和对象。从jq1.4.3起，html5 的data-xxx属性会自动被添加到jq的data对象里，比如有下列代码：

<div data-role="page" data-last-value="http://www.mamicode.com/43" data-hidden="true" data-options=‘{"name":"noahlu"}‘></div>

下面的等式都成立：

$("div").data("role") === "page";$("div").data("lastValue") === 43;$("div").data("hidden") === true;$("div").data("options").name === "noahlu";

尽管.data()用来存数据挺方便，它也是有过不堪回首的过去，请看：

<button id="foo" data-key="1.4000">Click me</button><script>typeof $(‘#foo‘).data(‘key‘);</script>

jQuery 1.8之前的版本输出’number’，1.8版本之后输出为’string’。1.8版之前，data会把值转换成基本类型，其实我们这里想要的是’1.4000′并不是1.4。

从.data()的实际用途来看，跟.prop()似乎很像，都可以给DOM对象附加上一些自定义的值。我只能说，他们定位不同，看看他们的各自的方法名，再想想什么场景用什么方法吧。

最后，从性能上对比，.prop() > .data() > .attr()，不同浏览器不同版本.data()和.attr()的性能关系有差异，不过.prop()总是最优的。

参考资料

• .prop() vs .attr()
• jQuery 1.6.1 released
• jQuery 1.6 and .attr()
• jQuery doc .data()
• jQuery attr() prop() data() performance
• Don’t use the jQuery .data() method. Use .attr() instead.

上面的内容转自：http://www.noahlu.com/blog/javascript-note/jquery-attr-prop-data/

上面的区别导致经常在做全选与全不选时等问题，所以在设置selectedIndex, tagName, nodeName, nodeType, ownerDocument, Checked, 或者defaultSelected时应该使用prop方法，而不是用attr方法。

查询官方API得到解释如下：

The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected. Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties.

.prop()方法是一种简便的设置值得方式，特别是多属性、使用函数返回值或者一次性在多个elements中设置数值。在设置selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 或者defaultSelected时应该使用本方法。从jQuery1.6起，这些属性不再能够用.attr()方法设置了，它们没有相当的attributes，只有properties。

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabledproperty of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val()method should be used for getting and setting value.

Properties可以改变DOM元素的动态站台，不适用序列化的attribue。比如input的value属性、input和button 的disabled属性，或者checkbox的checked属性。这时应该使用.prop()来替代.attr()来设置disabled和 checked。.val()用于获取或者设置其value值。

jQuery .attr() .prop() .data()区别及全选等问题