背景
カスタム属性を使う際に必須のメソッドの２つの違いがいまいち理解していなかったため調べて自分なりにまとめてみた。
data()について
「data()」を使うとHTML要素内に付与されたdata属性に対して、取得・設定・変更などが簡単に行える。
独自の属性を作成して付与できるのがdata属性の特徴です。
このようにすることで、あとからJavaScriptやjQueryで取得・変更できるわけです。
attr()について
dataメソッドと似ていますが、属性名の指定は「data-」の部分も一緒に記述しなければならない。
data()の使い方
<body>
<p data-name="sato" data-age="42" data-tel="012-3456-7890">私の名前は佐藤です</p>
<script>
const result = $('p').data();
console.log( result );
</script>
</body>
// =>{name: "sato", age: 42, tel: "012-3456-7890"}
対象要素.data( 属性名, 値 )とすると設定・変更できる
<body>
<p>おはよう</p>
<script>
$('p').data('greet', 'morning');
console.log( $('p').data('greet') ); // 属性の設定
$('p').data('greet', 'hello');
console.log( $('p').data('greet') ); // 属性の更新
</script>
</body>
// => morning
// => evening
attr()の使い方
対象要素.attr( 属性名, 値 )
<body>
<p>おはよう</p>
<script>
$('p').attr('data-greet', 'morning');
</script>
</body>
// => morning
違いは？
「attr()」で設定した属性はHTML要素へ直接追加されるが、「data()」で設定した属性はjQuery内へ一時的に保持されるだけで直接HTML要素に追加されるわけではない。
<body>
<p id="one">テスト1</p>
<p id="two">テスト2</p>
<script>
$('#one').attr('data-name', 'sato');
console.log( $('#one')[0] );
$('#two').data('name', 'sato');
console.log( $('#two')[0] );
</script>
</body>
// => <p id="one" data-name="taro">サンプルテキスト</p> ←追加されている
// => <p id="two">サンプルテキスト</p> ←追加されていない