JavaScript豆知識7_querySelector

写真はこの時期が旬のスナップえんどうです。記事の内容にはまったく関係ありません。

さて、久しぶりにコーディングのネタが出てきました。今回はquerySelector()のお話です。

getElementById()やgetElementsByClassName()は素直にIDやクラス名を入れれば動いてくれるので使いやすいですが、querySelectorはセレクターを書かなければいけないし、セレクターの書式がちょっと独特なので敬遠していましたが、やはり使えると便利です。

例えば、inputタグでtypeがtextで、readonlyでなくてかつmust属性がtrueでCSSのneedクラスを持つ…などというややこしい条件で検索することもできます。が、属性やCSSクラスを指定するときの書き方、ANDとOR、否定にあいまい一致など色々あってややこしかったので、自分用のメモも兼ねてざっとまとめました。

//AND,OR,NOTの書き方

//AND　続けて書く。間に何も挟まない。
'[type=text][readoly=true]'

//OR　カンマで繋ぐ。
'[type=text],[type=number]'

//NOT　:not()で囲う
':not([type=tel])'



//タグ・属性・CSSクラスの指定

//タグ　カッコも記号も何もつけずに書く。
'input'

//属性　[]で囲い、=で値を指定する。値の指定をしなければ、属性を持っているとtrueとみなす。
'[type=text]'
'[hoge]'

//CSSクラス　.クラス名で書く。.が必須。
'.need'


//inputタグでtypeがtextで、readonlyでなくてかつmust属性がtrueでCSSのneedクラスを持つ
document.querySelectorAll('input[type=text][must=true].need:not([readonly])')