class属性を汚さない便利なdata属性ですが、classのように複数条件で指定する方法を知らなかったのでまとめておきます。

通常の「data-」属性の選択方法。

<p data-color=”red”></p>

var red = document.querySelector('[data-color="red"]');

要素の選択ではなく「data-」属性の値を取得・設定する方法はこちら。

element.getAttribute('data-name');
element.setAttribute('data-name','value');

この方法では1つの条件でしか指定することができませんでした。例えば、

<p class=”晴れ 雨 くもり” data-tenki=”晴れ 雨 くもり”></p>

このような要素があった場合classなら「晴れ」と「雨」の両方を持った要素を指定したい場合は(“.晴れ .雨”)のように選択することができますが、data属性の場合は値を完全一致させる必要があります。

dataで指定する場合は(‘[data-tenki=”晴れ 雨 くもり”]’)

セレクタの曖昧指定を利用する。

classのセレクタと同様にdata属性の値も複数条件で指定したい場合は、ワイルドカードを使って曖昧選択をします。

使えるワイルドカード

• 「*」を含む
• 「^」で始まる
• 「$」で終わる

<p data-tenki=”晴れ 雨くもり“></p>
<p data-tenki=”晴れ くもり“></p>
<p data-tenki=”晴れ 雨“></p>

「晴れ」という文字列を値に持つdata-tenki属性を指定する場合

var sel = document.querySelector('[data-tenki*="晴れ"]');

アスタリスクのワイルドカードがポイントです。これにより値に「晴れ」を含むものを指定できます。

「晴れ」と「雨」という2つの文字列を値に持つdata-tenki属性を指定する場合

var sel = document.querySelector('[data-tenki*="晴れ"][data-tenki*="雨"]');

間を空けずに繋げて複数指定します。

「くもり」を含まない「晴れ」という文字列を値に持つdata-tenki属性を指定する場合

var sel = document.querySelector('[data-tenki*="晴れ"]:not([data-tenki*="くもり"])');

:not()を利用します。

これらの曖昧選択を使うことで「data-」属性をclassライクに使用することができます。

これで動的に文字列でセレクタの中身を作ることもできますね。