一直以为 getAttribute() 和 attr() 都是获取元素属性的方法,只是一种是 JS 写法,一种是 JQ 写法,但其实它们是有区别的。
主要区别
调用 getAttribute() 的主体必须是元素(Object Element)
调用 attr() 的主体必须是对象(Object Object)
JS写法:getAttribute()
getAttribute() 是元素(Element)下的一种方法,因此想调用这个方法,必须确保它的调用主体是元素,否则会报错。
正确使用方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="test" custom="hello"></div>
<script type="text/javascript">
var div = document.getElementById('test');
//获取的div是[object HTMLDivElement]
alert(div.getAttribute('custom'));
</script>
</body>
</html>
错误使用方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="test" custom="hello"></div>
<script type="text/javascript">
var div = $('#test');
//获取的div是[object Object]
alert(div.getAttribute('custom'));
</script>
</body>
</html>
通过 JQ 选择器获取 div,此时的 div 是对象(Object)也就无法调用 getAttribute() 方法,浏览器(Safari)会报错如下:
TypeError: div.getAttribute is not a function. (In 'div.getAttribute('custom')', 'div.getAttribute' is undefined)
JQ写法:attr()
Get the value of an attribute for the first element in the set of matched elements.
jQuery API Documentation 中对 attr() 方法——准确说是 attr( attributeName ) 方法的描述是“获取一组相匹配元素中首个元素的属性值”。
描述中的“一组元素”应该指的是对象(Object),而不是多个元素组成的集合(HTMLCollection),因为如果方法的执行主体是集合,浏览器同样会报错:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="test" custom="hello"></div>
<div class="test" custom="hi"></div>
<script type="text/javascript">
var div = document.getElementsByClassName('test');
//获取的div是[object HTMLCollection]
alert(div.attr('custom'));
</script>
</body>
</html>
正确使用方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="test" custom="hello"></div>
<div class="test" custom="hi"></div>
<script type="text/javascript">
var div = $('.test');
//获取的div是[object object]
alert(div.attr('custom'));
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。