attr 和 prop的区别和使用

　　一. attr和prop的区别

　　要想弄清楚attr和prop的区别，就要先搞清楚js中使用DOM方法获取设置属性和使用对象方法获取设置属性的区别。

 

　　在javascript中使用DOM方法设置获取属性值主要是依靠setAttribute和getAttribbute，而使用对象方法获取属性值主要是靠节点对象.属性名称。

　　那么这两种方法有什么不同？

　　1.  获取属性值

　　假设有这样的html代码：

　　<div id = 'id_div' class = 'class-div' a = 'aaa'>

　　那么首先使用getAttribute进行测试：

var div = document.getElementById('id_div');
console.log(div.getAttribute('id'));　　　　　　结果是id_div
console.log(div.getAttribute('class'));　　　　结果是class-div　　　　　　　　
console.log(div.getAttribute('a'));　　　　　　结果是aaa

　　可见使用getAttribute，节点的固有属性和自定义属性都可以获取。

　　接下来使用对象方法进行测试：

var div = document.getElementById('id_div');
console.log(div.id);　　　　　　　　结果是id_div
console.log(div.className);　　　　结果是class-div
console.log(div.a);　　　　　　　　 结果是undefined

　　由此可见使用对象方法获取属性值的话，如果是节点的固有属性那么是可以获取到的，但是如果是自定义的属性，那么这样是获取不到的。

　　2.  设置属性值

　　首先使用setAttribute设置属性值。

var div = document.getElementById('id_div');
div.setAttribute('class','bbb');
console.log(div.getAttribute('class'));　　　　bbb
console.log(div.className);　　　　　　　　　　　bbb

　　这短代码是用setAttribute设置了固有属性class的值，用两种方法获取class的值。结果是两者都能够获取到。

var div = document.getElementById('id_div');
div.setAttribute('b','bbb');
console.log(div.getAttribute('b'));　　　　bbb
console.log(div.b);　　　　　　　　　　　　　 undefined

　　这段代码是用setAttribute设置了一个自定义属性的值，结果显示使用对象方法不能够获取到属性的值。另外在html文档的结构中，我们也可以看到，属性b也出现在了html文档中。

　　然后我们使用对象方法设置属性值。

var div = document.getElementById('id_div');
div.className = 'bbb';
console.log(div.getAttribute('class'));　　　　　　bbb
console.log(div.className);　　　　　　　　　　　　　bbb

　　结果是二者都是一样的结果。

var div = document.getElementById('id_div');
div.b = 'bbb';
console.log(div.getAttribute('b'));　　　　　　　　null
console.log(div.b);　　　　　　　　　　　　　　　　　bbb

　　而对于使用对象方法设置属性值，此时使用DOM方法获取的值为null，而使用对象方法成功获取到bbb。看一下html文档，发现属性b并没有出现在html文档中。

　　最后我们在实验一下这样的代码

var div = document.getElementById('id_div');
div.b = 'bbb';
div.setAttribute('b','aaa');
console.log(div.getAttribute('b'));　　　　　　　　aaa
console.log(div.b);　　　　　　　　　　　　　　　　　 bbb

　　这段代码，我们分别都使用两种方法对一个自定义属性进行设置。结果显示，用两种方法获取的结果并不相同。

var div = document.getElementById('id_div');
div.className = 'bbb';
div.setAttribute('class','aaa');　　　　　　　　　　
console.log(div.getAttribute('class'));　　　　　　aaa
console.log(div.className);　　　　　　　　　　　　　aaa

　　这段代码我们是用两种方法分别对固有属性class设置了不同的值，但是结果却显示的是最后修改的值。说明二者都影响了class。

 

　　之所以要区分这二者的区别，是因为，attr使用的就是DOM方法操作属性，而prop使用的是对象方法操作属性。因此也可知道二者的区别就是：attr对固有属性和自定义属性均可操作，而prop只能对固有属性进行操作（事实上也可以对自定义属性进行操作，但是自定义属性不能够影响到html文档）。因此当对固有属性进行操作的时候就是用prop，而对自定义属性进行操作的时候就用attr。

　　而对input 的checked，selected，disabled属性，由于prop使用的是布尔值进行操作，因此更加方便，所以这种情况，一般使用prop。另外prop还可以设置和返回一下的属性：tagName、selectedIndex、nodeName、nodeType、ownerDocument、defaultChecked和defaultSelected等。