property 和 attribute很是容易混淆，两个单词的中文翻译也都很是相近（property：属性，attribute：特性），但实际上，两者是不一样的东西，属于不一样的范畴。html
- property是DOM中的属性，是JavaScript里的对象；
- attribute是HTML标签上的特性，它的值只可以是字符串；
attribute和property介绍
简单理解，Attribute就是dom节点自带的属性，例如html中经常使用的id、class、title、align等。浏览器
而Property是这个DOM元素做为对象，其附加的内容，例如childNodes、firstChild等。dom
有如下代码：测试
<div id="div1" class="divClass" title="divTitle" title1="divTitle1"></div> var in1=document.getElementById("div1"); console.log(in1);
对于id为div1的div，它的property内容以下：（部分）spa
能够发现有一个名为“attributes”的属性，类型是NamedNodeMap，同时有“id”和“className”、”title“等基本的属性，但没有“titles”这个自定义的属性。翻译
console.log(in1.id); //div1 console.log(in1.className); //divClass console.log(in1.title); //divTitle console.log(in1.title1); //undefined
能够发现，标签中的属性，“id”和“className”、”title“会在in1上建立，而“titles”不会被建立。这是因为，每个DOM对象都会有它默认的基本属性，而在建立的时候，它只会建立这些基本属性，咱们在TAG标签中自定义的属性是不会直接放到DOM中的。设计
那自定义的”title1“去哪里了呢？在attributes属性里能够看到以下：3d
“title1”被放在了attributes这个对象里，这个对象按顺序记录了咱们在TAG中定义的属性和属性的数量。双向绑定
从这里就能够看出，attributes是属于property的一个子集，它保存了HTML标签上定义属性。若是再进一步探索attitudes中的每个属性，会发现它们并非简单的对象，它是一个Attr类型的对象，拥有NodeType、NodeName等属性。关于这一点，稍后再研究。注意，打印attribute属性不会直接获得对象的值，而是获取一个包含属性名和值的字符串，如：code
console.log(in1.attibutes.title1); // divTitle1
由此能够得出：
- HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；
- 这些attribute属性的JavaScript中的类型是Attr，而不只仅是保存属性名和值这么简单；
再以下：
<input id="in_2">
在它的property中有以下部分：
尽管咱们没有在TAG中定义“value”，但因为它是DOM默认的基本属性，在DOM初始化的时候它照样会被建立。
“脚踏两只船”
经常使用的Attribute，例如id、class、title等，已经被做为Property附加到DOM对象上，能够和Property同样取值和赋值。可是自定义的Attribute，就不会有这样的特殊优待，例如：
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">100</div>
这个div里面的“title1”就不会变成Property。
即，只要是DOM标签中出现的属性（html代码），都是Attribute。而后有些经常使用特性（id、class、title等），会被转化为Property。能够很形象的说，这些特性/属性，是“脚踏两只船”的。
最后注意：“class”变成Property以后叫作“className”，由于“class”是ECMA的关键字。
- DOM有其默认的基本属性，而这些属性就是所谓的“property”，不管如何，它们都会在初始化的时候再DOM对象上建立。
- 若是在TAG对这些属性进行赋值，那么这些值就会做为初始值赋给DOM的同名property。
attribute和property的取值和赋值
一、attribute取值
《js高级程序设计》中提到，为了方便操做，建议你们用setAttribute()和getAttribute()来操做便可。
<div id="div1" class="divClass" title="divTitle" align="left" title1="divTitle1"></div> var id = div1.getAttribute("id"); var className1 = div1.getAttribute("class"); var title = div1.getAttribute("title"); var title1 = div1.getAttribute("title1"); //自定义特性
getAttribute()能够取得任何特性，不论是标准的仍是自定义的。
可是这个方法的浏览器兼容性有问题，有些浏览器可能会获取属性Property的值，所以jQuery要作一个测试，看getAttribute()是不是绝对获取特性Attribute的值。
div1.className = 'a'; var judge = div1.getAttribute("className") === 'a';
若是以上代码成立，说明getAttribute()方法出现了问题，将再也不使用。
二、attribute赋值
div1.setAttribute('class', 'a'); div1.setAttribute('title', 'b'); div1.setAttribute('title1', 'c'); div1.setAttribute('title2', 'd');
用setAttrbute()赋值，任何Attribute均可以，包括自定义的。并且，赋值的Attribute会马上表现到DOM元素上。
若是是标准特性，也会更新它们关联的属性的值：
最后注意，setAttribute()的两个参数，都必须是字符串。即对特性Attribute职能赋值字符串，而对属性Property就能够赋任何类型的值了。
三、property取值
属性取值很简单。取任何属性的只，用“.”就能够：
var id = div1.id; var className = div1.className; var childNodes = div1.childNodes; var attrs = div1.attributes;
此处再次强调：
- class特性在变成属性时，名字改为了“className”，所以div1.className和div1.getAttrbute('class')相同。
- 上面代码中的div1.attributes是取的attributes这一属性，取出来保存到attrs变量中，attrs就成了一个NamedNodeList类型的对象，里面存储了若干个Attr类型。
4. Property赋值
赋值和基本的js对象属性赋值同样，用“.”便可：
div1.className = 'a'; div1.align = 'center'; div1.AAAAA = true; div1.BBBBB = [1, 2, 3];
对属性Property能够赋任何类型的值，而对特性Attribute只能赋值字符串！
另外，对于属性Property的赋值在IE中可能会引发循环引用，内存泄漏。为了防止这个问题，jQuery.data()作了特殊处理，解耦了数据和DOM对象。
更改property和attribute其中一个值，会出现什么结果
in1.value='new value of prop'; console.log(in1.value); // 'new value of prop' console.log(in1.attributes.value); // 'value="1"'
此时，页面中的输入栏的值变成了“new value of prop”，而propety中的value也变成了新的值，但attributes却仍然是“1”。从这里能够推断，property和attribute的同名属性的值并非双向绑定的。
若是反过来，设置attitudes中的值，效果会怎样呢？
in2.setAttribute('value','ni') console.log(in2.value); //ni
console.log(in2.attributes.value); //value='ni'
由此，可得出结论：
- property可以从attribute中获得同步；
- attribute不会同步property上的值；
- attribute和property之间的数据绑定是单向的，attribute->property；
- 更改property和attribute上的任意值，都会将更新反映到HTML页面中；