jQueryとJavaScriptで属性操作の書き方の違いを比較しています。
属性の取得・設定
//取得
$('#id').attr('foo');
//設定
$('#id').attr('foo','bar');
el=document.getElementById('id');
//取得
el.getAttribute('foo');
el.foo;
el['foo'];
//設定
el.setAttribute('foo','bar')
el.foo='bar';
el.['foo']='bar';data属性の取得・設定
//取得
$('#id').attr('data-bar');
$('#id').data('bar');
//設定
$('#id').attr('data-bar','foo');
$('#id').data('bar'.'foo');
el=document.getElementById('id');
//取得
el.getAttribute('data-foo');
el.dataset.foo;
el.dataset['foo']
//設定
el.setAttribute('data-foo','bar');
el.dataset.foo='bar';
el.dataset['foo']='bar';
