脱jQuery～JavaScriptに支配されないための真の思考法～ attrメソッド

jQueryのattrメソッドをネイティブJavaScript(vanilla JS)で実装する方法について書く。

まずは、attrメソッドを使って一つ属性を設定する方法について。

// jQuery
$('a').attr('href','https://yahoo.co.jp');


// JavaScript
document.querySelector('a').setAttribute('href','https://yahoo.co.jp');

続いて複数の属性を設定する場合について。

// jQuery
$('img').attr({
  'src': 'https://dummyimage.com/300',
  'alt': 'ダミー画像'
});


// JavaScript
var _img = document.querySelector('img')
_img.setAttribute('src','https://dummyimage.com/300');
_img.setAttribute('alt','ダミー画像');

最後にattrメソッドを使って属性値を取得する方法について書く。

// jQuery
var _href = $('a').attr('href');


// JavaScript
var _href = document.querySelector('a').getAttribute('href');