SOFTELメモ

Softel Inc.

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

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などのライブラリを使おうという結論に戻ってくるような気がします。

関連するメモ

コメント(2)

Selectors API の querySelector/querySelectorAll を使ってみよう | TM Life 2011年12月15日 08:03

[…] 【Javascript】querySelector、querySelectorAll(CSSセレクタで要素取得) at softelメモ […]

babu_babu_baboo 2013年8月16日 05:44

document.querySelectorAll (‘input[type=”checkbox”]:checked’)
ならとか。