JS中attribute和property的区别

property是DOM中的属性，是JavaScript里的对象；

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

每一个DOM对象都会有它默认的基本属性，而在创建的时候，它只会创建这些基本属性，我们在TAG标签中自定义的属性是不会直接放到DOM中的。

HTML标签中定义的属性和值会保存该DOM对象的attributes属性里面；

attribute取值,赋值

getAttribute()：取得任何特性，不管是标准的还是自定义的。

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

<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");   //自定义特性

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

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

Property

而Property是这个DOM元素作为对象，其附加的内容，例如childNodes、firstChild等。

但是只会转化常用特性（id、class、title等）到Property对象上， 自定义的属性是不会转化到Property对象中的。

property取值、赋值

属性取值很简单。取任何属性的只，用**“.”**就可以：

 var id = div1.id;
 var className = div1.className; //className表示class
 var childNodes = div1.childNodes;
 var attrs = div1.attributes;

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

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

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

结论

• property能够从attribute中得到同步；
• attribute不会同步property上的值；
• attribute和property之间的数据绑定是单向的，attribute->property；
• 更改property和attribute上的任意值，都会将更新反映到HTML页面中；