javascript中的prop和attr方法的区别

‍

       对于HTML元素自己就带有的固有属性，在处理时，使用prop方法。对于HTML元素咱们本身自定义的DOM属性，在处理时，使用attr方法。

例：

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

        这个例子里<a>元素的DOM属性有“href、target和class"，这些属性就是<a>元素自己就带有的属性，也是W3C标准里就包含有这几个属性，或者说在IDE里可以智能提示出的属性，这些就叫作固有属性。处理这些属性时，建议使用prop方法。

<a href="#" id="link1" action="delete">删除</a>

        这个例子里<a>元素的DOM属性有“href、id和action”，很明显，前两个是固有属性，然后面一个“action”属性是咱们本身自定义上去的，<a>元素自己是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用attr方法。使用prop方法取值和设置属性值时，都会返回undefined值。 像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，所以须要使用prop方法去操做才能得到正确的结果。

源码解释：

                 attr方法里面，最关键的两行代码，elem.setAttribute( name, value + “” )和ret = elem.getAttribute( name )，很明显的看出来，使用的DOM的API setAttribute和getAttribute方法操做的属性元素节点。而prop方法里面，最关键的两行代码，return ( elem[ name ] = value )和return elem[ name ]，你能够理解成这样document.getElementById(el)[name] = value，这是转化成JS对象的一个属性。

使用提醒：

                    在遇到要获取或设置checked,selected,readonly和disabled等属性时，用prop方法显然更好若是你有JS性能洁癖的话，显然prop的性能更高，由于attr须要访问DOM属性节点，访问DOM是最耗时的