#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/")
##差异
- prop通过点
.
读写dom的属性;attr通过setAttribute和getAttribute方法 - prop大小写敏感;attr则不敏感
- prop原则上读写属性不出现在HTML中,除了id,src,href等,attr则都会影响到HTML
##同步与不同步
- 自定义的prop,与attr不同步,也不相等
- 非自定义的prop与attr是有条件同步的,即有的时候写入prop会同步到attr,有的时候写入attr会同步到prop。详情可看参考文章
##其他
- 万恶之源IE,版本9以下的property与attribute是完全相同的,除了class(className = class)
- attr读写属性中,传入的属性名不能包含空格,否则会报错,如:
dom.setAttribute("a space", 100);
- 对于
href
属性,prop与attr同步而不同值,如
// 对于<a href="/test/">link</a>
a.getAttribute("href")// => /test/
a.href // => http://www.example.com/test/
- 而对于checked属性,prop设置为false会生效,而attr设为"false"则没用,需把"checked"的属性删掉
来源:oschina
链接:https://my.oschina.net/u/1414034/blog/501034