DOM元素的特性（Attribute）和属性（Property）

1. 
   Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等；

而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等；
是用 点运算符 操作的DOM对象属性

2 .

常用的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的关键字。

3.取值和赋值
3.1 Attribute取值：
通过div1.Attributes获取所有的特性信息，div1.Attributes将返回一个NamedNodeList类数组，其中包含了若干个Attr类型的对象。《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()可以取得任何特性，不管是标准的还是自定义的。

3.2. Attribute赋值：

 div1.setAttribute('class', 'a');
 div1.setAttribute('title', 'b');
 div1.setAttribute('title1', 'c');
 div1.setAttribute('title2', 'd');

用setAttrbute()赋值，任何Attribute都可以，包括自定义的。而且，赋值的Attribute会立刻表现到DOM元素上。

---

如果是标准特性，也会更新它们关联的属性的值：

最后注意，setAttribute()的两个参数，都必须是字符串。即对特性Attribute只能赋值字符串，而对属性Property就可以赋任何类型的值了。

3.3. 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类型。

3.4. Property赋值：
赋值和基本的js对象属性赋值一样，用“.”即可：

div1.className = 'a';
div1.align = 'center';
div1.AAAAA = true;
div1.BBBBB = [1, 2, 3];

对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！

注意：Properties 属性一般影响 DOM 元素的动态状态并不会改变序列化的 HTML attribute 属性。所以input的disabled和checked属性，应该使用prop()而不是使用attr();