【Javascript】querySelector、querySelectorAll（CSSセレクタで要素取得）

Tweet

Category JavaScript 2010/05/30

XPath好きならdocument.evaluate、CSSセレクタ好きならelement.querySelector、element.querySelectorAll。

こんなことできます

document.querySelector('#sample') // → id="sample"の要素を取得

document.querySelectorAll('input') // → input要素を全部取得

document.querySelectorAll("input[type='checkbox']") // → チェックボックスを全部取得

document.querySelectorAll('#xyz > .abc') // → id="xyz" 直下の class="abc" を取得

jQueryそのまんまですね。

確かにjQueryはelement.querySelectorAllを内部で使っているようです（使える場合は）。

完全にそのまんまではないので、jQueryで使える :checkbox、:radio、:checked などのセレクタをquerySelectorで使うとエラーになります。

IE以外のブラウザはサポートしています。

読み込み後に値が変化したチェックボックスなどはdocument.querySelector(“[checked=’checked’]”) では取得できないようです。読み込み当時のHTMLでの結果が返ってきます（defaultValue、getAttributeを見ているような動作）。読み込み後に変化するchecked、selectedやvalueを見る処理には使えないので要注意。

その点はdocument.evaluate も事情は同じ様子。結局jQueryやprototypeなどのライブラリを使おうという結論に戻ってくるような気がします。