javascript DOM 操作 attribute 和 property 的区别

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() 。