attr()
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
获取匹配的元素集合中第一个元素的attribute,或者为每个选定的元素添加一个至多个attribute
prop()
Get the value of a property for the first element in the set of matched elements or set one or more properties for every matched element.
获取匹配的元素集合中第一个元素的property,或者为每个选定的元素添加一个至多个property
可以观察到,两者之间的功能是十分相近的,只是两者操作的对象不同。
这样,我们将问题缩小为attribute与property之间的区别。
attribute与propery都有属性的意思,为了以示区分,我们约定命名attribute为属性,命名property为特性
先说attribute
在javascript中有getAttribute(),专门用来获取节点的属性值。
节点的属性值,我们指的是<img id=‘test‘ src=‘test.jpg‘>中的src的值
<img id=‘test‘ src=‘test.jpg‘> <script type=‘text/javascript‘> var image = document.getElementById(‘test‘); console.log(image.getAttribute(‘src‘)); </script>
以及setAttribute(),设置节点的属性值。
<img id=‘test‘ src=‘test.jpg‘> <script type=‘text/javascript‘> var image = document.getElementById(‘test‘); image.setAttribute(‘src‘, ‘another.jpg‘); </script>
可以看到,节点的属性值发生了改变。通过setAttribute设置的属性值改变的就是节点的属性值。
attr()的功能便是结合javascript中的getAttribute()与setAttribut(),操作的对象是节点的属性值。
再说property
property是DOM元素的特性,和平常使用对象的方法相同,可以通过对象.特性获取对象的特性值,也可以通过对象.特性=特性值的方法来设置对象的特性值。
<img id=‘test‘ src=‘test.jpg‘> <script type=‘text/javascript‘> var image = document.getElementById(‘test‘); console.log(image.src); </script>
可以看到获取了DOM元素的特性值。虽然与节点的属性值内容所指相同,但是形式上还是有区别的。
再看看设置DOM元素特性值:
<img id=‘test‘ src=‘test.jpg‘> <script type=‘text/javascript‘> var image = document.getElementById(‘test‘); image.src=‘another.jpg‘; </script>
发现改变了DOM元素的特性值,节点元素的属性值随着发生了改变。再通过getAttribute()方法,看是否能获取刚刚设定的特性值。
<img id=‘test‘ src=‘test.jpg‘> <script type=‘text/javascript‘> var image = document.getElementById(‘test‘); image.src=‘another.jpg‘; console.log(img.getAttribute(‘src‘)); </script>
证实改变DOM的特性值,元素的属性值也同样发生了改变。
难道说attribute与property是一样的吗?
其实不尽然,真实情况是attribute与property引用了相同的数据来源。
1. 于build-in属性,attribute和property共享数据,attribute更改了会对property造成影响,反之亦然,但是两者的自定义属性是独立的数据,即使name一样,也互不影响,看起来是下面这张图,但是IE6、7没有作区分,依然共享自定义属性数据。
2. 并不是所有的attribute与对应的property名字都一致。比如attribute中的class,在property中对应的名称为className。
3. 对于值是true/false的property,类似于input的checked等,attribute取得值是HTML文档里面的值(checked),property是取得计算结果(true/false),property改变并不影响attribute字面量,但attribute改变会影响property计算。
4. 对于一些和路径相关的属性,两者取得值也不尽相同,但是同样attribute取得是字面量,property取得是计算后的完整路径,就像上面例子中src的返回值。
如何选择
总体来说,对于内建属性使用prop(),自定义属性时使用attr(),另外的参数可以参照下面这张表。