【2021/9/18】登録不要の見積書作成ツール
「SPEEC」を公開しました!

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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

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

data属性を指定して要素を取得します。要素の取得にはqureySelectorもしくはquerySelectorAllを使用します。querySelectorquerySelectorAllCSSセレクター名を指定して要素を取得することができるため、セレクターに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から操作でき、値の取得や設定等も容易に行えます。詳しくは下記の記事で解説していますので、ご参照いただければ幸いです。

以上、JavaScriptでdata属性の値を指定して要素を取得する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

短期間でプログラミングを習得してエンジニアになろう!

エンジニアに転職を考えている方、独学で勉強中の方必見!CodeCampなら自宅にいながら実務経験があるエンジニアからマンツーマンで指導してもらうことができます。実践的なスキルを習得して一日でも早いエンジニアデビューを目指しましょう。まずは無料体験から!

CodeCamp 公式サイトへ

おすすめの書籍