javascript data属性(data-*)を全て取得する

作成日 2022.11.23
javascript
javascript

javascriptで、data属性(data-*)を取得するサンプルコードを記述してます。「スプレッド構文」を使用すれば簡単にオブジェクトとして取得可能です。

1. 環境
2. data属性(data-*)を取得
3. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 107.0.5304.88

Javascript サンプル集はこちら

data属性(data-*)を取得

data属性(data-*)を取得するには
1.　スプレッド構文で「DOMStringMap」をコピー
で可能です。

<div id="foo" data-id="1" data-name="sample"></div>

<script>

const elm = document.getElementById('foo');

console.log(elm.dataset);
// DOMStringMap {id: '1', name: 'sample'}

const obj = {...elm.dataset}; // スプレッド構文でコピー

console.log(obj);
// {id: '1', name: 'sample'}

</script>

実行結果

サンプルコード

以下は、
「実行」ボタンをクリックすると、指定した要素のdata属性を全て取得して結果を表示するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-75 mx-auto" style="margin-top:200px">

    <h2><span class="badge badge-info">結果</span></h2>
    <div id="foo" data-id="1" data-name="sample"></div>

    <button type="button" onclick="dipsDataset()" class="btn btn-raised btn-info">
      実行
    </button>

  </div>

  <script>

    const dipsDataset = () => {

    // 表示用要素取得
    let elm = document.getElementsByClassName("badge")[0];

    // JSON 文字列に変換して表示
    elm.textContent = JSON.stringify({...foo.dataset});

    }

  </script>
</body>

</html>

オブジェクトが表示されていることが確認できます。