【jQuery・javascript】カスタムデータ属性の値の取得方法調べてみた

jqueryを使ってのカスタムデータ属性の値の取得方法

単一要素のカスタムデータ属性の値の取得方法

<div id="testid" data-test="valueが入るよ">カスタムデータ属性</div>
<script>
jQuery(function($){
  console.log($('#testid').data('test'));//valueが入るよ
  console.log($('#testid').attr('data-test'));//valueが入るよ
});
</script>

「data()」と「attr()」で取得できる

複数のカスタムデータ属性の値の取得方法

<div id="testid" data-arraytest='{"test01":"テスト1","test02":"テスト2","test03":"テスト3"}'>複数の値を持ったカスタムデータ属性</div>
<script>
jQuery(function($){
  console.log($('#testid').data('arraytest').test01);//テスト01
  console.log($('#testid').data('arraytest').test02);//テスト02
  console.log($('#testid').data('arraytest').test03);//テスト03
  console.log($('#testid').data('arraytest'));//オブジェクトで返す→{"test01":"テスト1","test02":"テスト2","test03":"テスト3"}
  console.log($('#testid').data('arraytest')['test01']);//テスト01
  console.log($('#testid').data('arraytest')['test02']);//テスト02
  console.log($('#testid').data('arraytest')['test03']);//テスト03

  console.log($('#testid').attr('data-arraytest'));//文字列で返す→{"test01":"テスト1","test02":"テスト2","test03":"テスト3"}
  console.log($('#testid').attr('data-arraytest')[0]);//配列じゃなくて文字列だから先頭の文字「{（はじめ波括弧）」が出力される
  console.log($('#testid').attr('data-arraytest')[1]);//配列じゃなくて文字列だから2番目の文字「"（ダブルクオーテーション）」が出力される
});
</script>

「attr()」は文字列として取得するから複数の値を用いる時は上手く出力できないようなので
オブジェクトとして扱う事が可能な「data()」をカスタムデータ属性では使用した方がいいみたい

javascriptを使ってのカスタムデータ属性の値の取得方法

単一要素のカスタムデータ属性の値の取得方法

<div id="testid" data-test="valueが入るよ">カスタムデータ属性</div>
<script>
  console.log(document.getElementById('testid').dataset.test);//valueが入るよ
  console.log(document.getElementById('testid').getAttribute('data-test'));//valueが入るよ
</script>

「dataset」と「getAttribute」で値の取得ができた

複数のカスタムデータ属性の値の取得方法

<div id="testid" data-arraytest='{"test01":"テスト1","test02":"テスト2","test03":"テスト3"}'>複数の値を持ったカスタムデータ属性</div>
<script>
  console.log(document.getElementById('testid').dataset.arraytest);//{"test01":"テスト1","test02":"テスト2","test03":"テスト3"}
  console.log(document.getElementById('testid').dataset.arraytest[0]);//「{（はじめ波括弧）」が出力される
  console.log(document.getElementById('testid').getAttribute('data-arraytest'));//{"test01":"テスト1","test02":"テスト2","test03":"テスト3"}
  console.log(document.getElementById('testid').getAttribute('data-arraytest')[0]);//「{（はじめ波括弧）」が出力される
</script>

「dataset」と「getAttribute」は両方とも文字列として出力するみたいだからひと手間かけてオブジェクトに変換する必要があるみたい
「JSON.parse()」を使ってオブジェクトに変換してカスタムデータ属性の値を取得する

<script>
  console.log(JSON.parse(document.getElementById('testid').dataset.arraytest)['test01']);//「テスト1」が出力される
  console.log(JSON.parse(document.getElementById('testid').getAttribute('data-arraytest'))['test01']);//「テスト1」が出力される
</script>