DOM中Property与Attribute的区别

大城市里の小女人 提交于 2019-12-05 19:52:05

#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/
  1. 而对于checked属性,prop设置为false会生效,而attr设为"false"则没用,需把"checked"的属性删掉
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!