Attribute和Property的区别

一：Attribute和Property的区别
1.含义区别
首先在定义上更准确的来说，Attribute和Property分别为特性和属性，作为区别。 
其次，这样理解下来，我们知道Attribute就是DOM节点自带属性，例如我们在HTML中常用的id,class,src,title,alt等。而Property则是这个DOM元素作为对象，其附加的属性或者内容，例如childNodes，firstChild等。

另外我们常把他们弄混淆是因为，有些例如id,class,title常用的Attribute已经被作为Property附加在DOM对象上，也可以取值和赋值。但是自定义的Attribute就不能了，例如：

//这里的title1是自定义属性不能作为property
<div id="div1" class="divClass" title="divTitle" title1="divTitle1">自定义attribute</div>
1
2
2.取值和赋值区别
Attribute取值和赋值
//attribute取值
  getAttribute()
  eg:var id = div1.getAttribute("id")
     var id = div1.getAttribute("title1")
//attribute赋值
  getAttribute(attribute,value)  //value只能是字符串形式
  eg:div1.setAttribute('class', 'a');
     div1.setAttribute('title1', 'asd');  //自定义属性也可
1
2
3
4
5
6
7
8
Property取值和赋值
//通过'.'号获取property
  var id = div1.id;
  var className = div1.className; //相当于div1.getAttribute('class')
//通过'='赋予property
  div1.className = 'a';
  div1.align = 'center';
1
2
3
4
5
6
二：attr( )和prop( )区别
有了上面对attribute和property的区别了解，我们能很快定位他们的区别点。

针对属性对象不同

prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。

用于设置的属性值类型不同

attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。
---------------------