getAttribute() 与 attr() 的区分

2024年5月23日 202次阅读 来源: Xiphap

一向认为 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>
    原文作者：Xiphap
    原文地址: https://segmentfault.com/a/1190000013934899
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞