DOM中Property与Attribute的区别

#DOM中Property与Attribute的区别

property和attribute的汉语翻译几乎相同，都有“属性”的意义（这里姑且称attribute为“特性”，以方便区分），而他们的取值也常常相同，但有时又会踩坑，发现两者会不相等，不一样步。如下文章总结一下它俩的特性和区别。更详情的对比，请看参考文章：DOM中Property与Attribute的区别

##简述

Property就是这些，至关于jQuery.prop()：

dom.checked = false;
dom.id = "footer";
$dom.prop("checked", false)

attribute就是这些，至关于jQuery.attr()：

dom.setAttribute("href", "/download/");
dom.getAttribute("id");
$dom.attr("href", "/download/")

##差别

1. prop经过点.读写dom的属性；attr经过setAttribute和getAttribute方法
2. prop大小写敏感；attr则不敏感
3. prop原则上读写属性不出如今HTML中，除了id,src,href等，attr则都会影响到HTML

##同步与不一样步

1. 自定义的prop，与attr不一样步，也不相等
2. 非自定义的prop与attr是有条件同步的，即有的时候写入prop会同步到attr,有的时候写入attr会同步到prop。详情可看参考文章

##其余

1. 万恶之源IE，版本9如下的property与attribute是彻底相同的，除了class（className = class）
2. attr读写属性中，传入的属性名不能包含空格，不然会报错，如:dom.setAttribute("a space", 100);
3. 对于href属性，prop与attr同步而不一样值，如

// 对于<a href="/test/">link</a>
a.getAttribute("href")// => /test/
a.href // => http://www.example.com/test/

4. 而对于checked属性，prop设置为false会生效，而attr设为"false"则没用，需把"checked"的属性删掉