Attribute与Property的区别

参考文章：
http://blog.163.com/excalibur_teatime/blog/static/2685980082016112011735195/

Attribute就是dom节点自带的属性，例如html中常用的id、class、title、align等，当然，也可以自定义Attribute；而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等

一、JS中Property
属性，就像C#等高级语言可以.获取或者设置其值；
特点
1、其值可以为任意值
2、名字区分大小写。
3、当调用innerHTML时不会显示出来。

二、JS中Attribute
特性，每一个dom元素都有一个attributes属性来存放所有的attribute节点，通过getAttribute()和setAttribute()方法来进行获取和操作。
特点
1、只能为字符串
2、名字与大小写无关，因为HTML attribute是大小写无关的。
3、当调用innerHTML时会显示出来。
4、你可以通过调用 attributes 属性对它们进行遍历。

三、JS中Property和Attribute的共性
常用的Attribute，例如id、class、title等，已经被作为Property附加到DOM对象上，可以和Property一样取值和赋值。但是自定义的Attribute，就不会有这样的特殊优待
例如

100

这个div里面的“title1”就不会变成Property。
即，只要是DOM标签中出现的属性（html代码），都是Attribute。然后有些常用特性（id、class、title等），会被转化为Property。

四、Attribute取值
用getAttribute()来操作即可。

var id = div1.getAttribute(“id”);
var className1 = div1.getAttribute(“class”);
var title = div1.getAttribute(“title”);
var title1 = div1.getAttribute(“title1”); //自定义特性

五、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’)相同。

七、Property赋值
赋值和基本的js对象属性赋值一样，用“.”即可：
div1.className = ‘a’;
div1.align = ‘center’;