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] = valuedocument.getElementById(el)[name]

可以参考 http://www.cnblogs.com/zhwl/p/3520162.html,看两者的具体区别。一般情况下,对于具有 boolean 类型的属性,如 checked, selected 或者 disabled 等等应该使用prop(),其他的使用 attr()

posted @ 2016-10-08 16:22  drop *  阅读(224)  评论(0编辑  收藏  举报