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
*/ダブルクォーテーションとシングルクォーテーションが混在するので注意が必要です。
for文ではなくforEachでループする方法はJavaScript querySelectorAllで取得したデータをforEachでループするで紹介しています。