DOM中Property与Attribute的区别

为什么80%的码农都做不了架构师？>>>   

#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"的属性删掉

转载于:https://my.oschina.net/luozt/blog/501034