zukucode
主にWEB関連の情報を技術メモとして発信しています。

JavaScript querySelectorAllでデータ属性を持つ要素を取得する

JavaScriptで、指定したデータ属性を持つ要素を取得したいときがあります。

querySelectorAllを使えばデータ属性だけでなく、指定した属性を持つ要素の一覧を取得できます。

例えば以下のhtmlがあるとします。

<div id="div1">
  <input type="text" id="text1" data-val="foo" />
  <input type="text" id="text2" data-val="bar" />
  <input type="text" id="text3" data-val="foo" />
  <input type="text" id="text4" />
</div>

データ属性の存在で絞り込み

div1の中にあるテキストボックスのうち、data-valというデータ属性を持つものの一覧を取得したい場合は以下のようにします。

var elems = document.getElementById('div1').querySelectorAll('[data-val]');
for (var i = 0; i < elems.length; i++) {
  console.log(elems[i].id);
}
/*実行結果
text1
text2
text3
*/

データ属性の値で絞り込み

data-valの値がfooのものの一覧を取得したい場合は以下のようにします。

var elems = document.getElementById('div1').querySelectorAll('[data-val]="foo"');
for (var i = 0; i < elems.length; i++) {
  console.log(elems[i].id);
}
/*実行結果
text1
text3
*/

ダブルクォーテーションとシングルクォーテーションが混在するので注意が必要です。


関連記事