みかづきブログ その3

3ヶ月つづけてみました。

DOMをセレクトするときに正規表現的な文法をつかう

属性セレクタには完全一致以外の選択方法が用意されています。


[attr]
attr という名前の属性を持つ要素を表します。

[attr=value]
attr という名前の、値が正確に "value" である属性を持つ要素を表します。

[attr~=value]
attr という名前の、値がスペースで区切られた項目リストであり、うち 1 つが正確に "value" である属性を持つ要素を表します。

[attr|=value]
attr という名前の、値がハイフンで区切られた項目であり、うち 1 つが正確に "value" である属性を持つ要素を表します。言語のサブコードのマッチに使用することができます。

[attr^=value]
attr という名前の、 "value" で始まる値を持つ要素を表します。

[attr$=value]
attr という名前の、 "value" で終わる値を持つ要素を表します。

[attr*=value]
attr という名前の、値に部分文字列として "value" という文字列が少なくても 1 つ存在する属性を表します。



developer.mozilla.org


これをうまく活用すれば、前方一致、後方一致、含むをつかったセレクトが可能です。

var elm = doc.querySelectorAll("[id=^a]"); // IDがaから始まっているものを選択 ex) #abc #ant etc...

当然jQueryのセレクタとしてもつかえます。

var $elm = $("[id=^a]"); // IDがaから始まっているものを選択 ex) #abc #ant etc...

ときにとても便利に使えます。
今回は以上です。