【JavaScript】data属性の値を指定して要素を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでdata属性（カスタムデータ属性）の値を指定して要素を取得する方法をご紹介しています。

data属性の値を指定して要素を取得したんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

data属性を指定して要素を取得する

data属性を指定して要素を取得します。要素の取得にはqureySelectorもしくはquerySelectorAllを使用します。querySelectorとquerySelectorAllはCSSセレクター名を指定して要素を取得することができるため、セレクターにdata属性を指定して要素を取得することができます。

HTML

<div id="app">
    <ul>
        <li data-user-id="100">ID:100</li>
        <li data-user-id="101">ID:101</li>
        <li data-user-id="102">ID:102</li>
        <li data-user-id="103">ID:103</li>
    </ul>
</div>

JavaScript

const data = document.querySelectorAll('[data-user-id]');

上記の方法でdata属性を指定して要素を取得することができます。

data属性の値を指定して要素を取得する

data属性の値を指定して要素を取得します。前項と同様にquerySelectorAllで要素を取得します。querySelectorもしくはquerySelectorAllで属性の値を指定する場合、値の部分をシングルクォーテーションもしくはダブルクォーテーションで囲む必要があります。そのためセレクターの指定に使っていない記号で値を囲みます。

HTML

<div id="app">
    <ul>
        <li data-user-id="100">ID:100</li>
        <li data-user-id="101">ID:101</li>
        <li data-user-id="102">ID:102</li>
        <li data-user-id="103">ID:103</li>
    </ul>
</div>

JavaScript

const elements = document.querySelectorAll('[data-user-id="100"]');

上記の方法でdata属性の値を指定して要素を取得することができます。

data属性の値を指定して要素を取得する（変数）

変数を使ってdata属性の値を指定して要素を取得します。前項同様、要素の取得にはquerySelectorAllを使用します。変数の指定は、文字列の中で変数を展開するときと同じです。値がユニークであればquerySelectorを使用した方がパフォーマンスは良いかもしれません。

HTML

<div id="app">
    <ul>
        <li data-user-id="100">ID:100</li>
        <li data-user-id="101">ID:101</li>
        <li data-user-id="102">ID:102</li>
        <li data-user-id="103">ID:103</li>
    </ul>
</div>

JavaScript

const userId = 100;
const data = document.querySelectorAll('[data-user-id="'+userId+'"]');

上記の方法で変数の値と一致するdata属性の要素を取得することができます。

最後に

data属性は要素に任意のデータを持たせることができ、取り扱うことができるデータ量を大幅に増やすことができます。本記事では要素を取得する点にフォーカスしましたが、data属性の値はJavaScriptから操作でき、値の取得や設定等も容易に行えます。詳しくは下記の記事で解説していますので、ご参照いただければ幸いです。