HTML DOM的attribute和property

概念

attribute：特性，property：属性，attribute 是元素标签的属性，property 是元素对象的属性;
attribute是HTML标签上的特性，它的值只能够是字符串；
property是DOM中的属性，是JavaScript里的对象；

例子

attribute是我们在html代码中经常看到的键值对
下面代码中的 input 节点有三个 attribute：
id：myinput
type：text
value：myvalue

	<input id="myinput" type="text" value="myvalue" />

property是attribute对应的DOM节点的对象属性：

	HTMLInputElement.id === 'myinput'
	HTMLInputElement.type === 'text'
	HTMLInputElement.value === 'myvalue'

区别

	<input id="myinput" type="text1" value="myvalue" /> 
	//页面加载完成后 在这个input中输入 Bob 

注意这段代码中的type属性，我们给的值是text1，这并不属于input支持的type种类，HTML ‘input’ 标签。

让我们来看看上面这个 input 节点的attribute和property的：

	//attribute
	input.getAttribute('id')  //myinput
	input.getAttribute('type') //text1
	input.getAttribute('value') //Bob

	//property
	input.id   //myinput
	input.type //text
	input.value //Bob

可以看到，在 attribute 中，值仍然是 html 代码中的值。而在 property 中，type被修改为text，而value随着用户改变 input 的输入，也变更为了 Bob

总结

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

附

来源于网络：
创建

• DOM对象初始化时会创建默认的基本property；
• 只有在HTML标签中定义的attribute才会被保存在property的attributes属性中；
• attribute会初始化property中的同名属性，但自定义的attribute不会出现在property中；
• attribute的值都是字符串；

数据绑定

• attributes的数据会同步到property上，然而property的更改不会改变attribute；
  对于value，class这样的属性/特性，数据绑定的方向是单向的，attribute->property；
• 对于id而言，数据绑定是双向的，attribute<=>property；
• 对于href而言，二者是双向绑定的，property中的href永远保存绝对路径，而attribute中的href则是保存相对路径。
• 对于disabled而言，改变attributes中的disabled不会改变更改property，也不会取消输入栏的禁用效果。当property上的disabled为false时，attribute上的disabled必定会不存在，此时数据绑定可以认为是双向的；

使用

• 可以使用DOM的setAttribute方法来同时更改attribute和property；
• 更改property和attribute上的任意值，都会将更新反映到HTML页面中；
• 直接访问attributes上的值会得到一个Attr对象，而通过getAttribute方法访问则会直接得到attribute的值；
• 大多数情况（除非有浏览器兼容性问题），jQuery.attr是通过setAttribute实现，而jQuery.prop则会直接访问DOM对象的property；

关键的两句话：

• attribute（特性），是我们赋予某个事物的特质或对象。
• property（属性），是早已存在的不需要外界赋予的特质。