写真はこの時期が旬のスナップえんどうです。記事の内容にはまったく関係ありません。 さて、久しぶりにコーディングのネタが出てきました。今回は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])')