javascript DOM 操作 attribute 和 property 的区别
在做 URLRedirector 扩展时,注意到在使用 jquery 操作 checkbox 是否勾选时,用 attr()
方法时有些出问题,原来的代码如下:
$("thead :checkbox").attr("checked", false);
...
$("tbody tr").each(function() {
$(this).find(":checkbox").first().attr("checked", false);
});
然后出现很奇怪的现象,在 thead 里面的 checkbox 没有办法取消勾选,而 tbody 里面的工作正常。
查了一下,说是 jquery 高版本对于 attr 和 prop 的处理更加接近于 javascript 原来的语义。在 javascript 中,property 具有更加广泛的语义,它是对象里面的属性,而 attribute 中是在 DOM 元素对象中 attributes 这个属性里面的一个,通过 setAttribute 、getAttribute 等方法进行操作。即:
{
id: ...
lang: ...
attributes: {
...
}
}
而操作 property 要通过 prop()
方法进行操作。因此,改为 :
$("thead :checkbox").prop("checked", false);
则工作正常。
attr()
方法相当于 elem.setAttribute(name, value + "")
和 elem.getAttribute(name)
,而 prop()
方法相当于 document.getElementById(el)[name] = value
和 document.getElementById(el)[name]
。
可以参考 http://www.cnblogs.com/zhwl/p/3520162.html,看两者的具体区别。一般情况下,对于具有 boolean 类型的属性,如 checked, selected 或者 disabled 等等应该使用prop()
,其他的使用 attr()
。