【jQuery】getAttribute() と attr() について

Question

開発環境

Laravel 6.0
Jquery 3.2
laravel-mix 5.0.1

解決したいこと

HTMLのボタン要素をクリック時にdeleteData関数を実行し、ボタン要素の属性（data-id）を取得したいのですが、getAttributeでは問題なく取得できるのに、attrでエラーが出てしまいます。
以下コードになります。

<button class="btn btn-danger destroy_btn" data-id="1" onclick="deleteData(this)">削除</button>

▼getAttribute()の場合

window.deleteData = function(e){
    let id = e.getAttribute("data-id");
    console.log(id);
}

// ▼出力
1

▼attr()の場合

window.deleteData = function(e){
    let id = e.attr("data-id");
    console.log(id);
}

// ▼出力
ajax.js:293 Uncaught TypeError: e.attr is not a function at window.deleteData

deleteDataメソッド引数eをコンソールで確認すると

<button class="btn btn-danger destroy_btn" data-id="1" onclick="deleteData(this)">削除</button>

が出力され、deleteDataメソッドが記述されているJsファイル内の他の箇所で正常にattr()で属性値を取得できた箇所の要素をコンソールで確認すると、

jQuery.fn.init [thead#hs_sort_btn.table-primary]
0: thead#hs_sort_btn.table-primary
・
・
・

が出力されました。
どちらもDOMを取得できているかなと思っているのですが、なぜjqueryのメソッドであるattr()はエラーが出て、getAttribute()は問題なく取得できるのでしょうか？

マニュアルも参照しましたが解決に至らなかったため質問させていただきます。
よろしくお願いいたします。

https://api.jquery.com

https://developer.mozilla.org

Answer 1

eに来るものはjQueryオブジェクトではなく生のDOMオブジェクトなので、.attrは取れません。

$(e).attr()のようにすることはできます。

Comments

[退会済みユーザー]

そうだったんですね。
しっかり覚えておきます。

$(e).attr("data-id");
↑↑↑
上記の記述に変更し、属性が取得できました。
ありがとうございます。