getAttribute() 与 attr() 的区别

最新推荐文章于 2022-12-03 22:56:24 发布

原创最新推荐文章于 2022-12-03 22:56:24 发布 · 6.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#JS #JQ #setAttribute() #attr()

JQ 同时被 2 个专栏收录

1 篇文章

订阅专栏

1 篇文章

订阅专栏

部署运行你感兴趣的模型镜像

一直以为 getAttribute() 和 attr() 都是获取元素属性的方法，只是一种是 JS 写法，一种是 JQ 写法，但其实它们是有区别的。

主要区别

调用 getAttribute() 的主体必须是元素(Element)
调用 attr() 的主体必须是对象(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>