querySelector() CSSセレクタの記法から要素を取得

みなさまどうもこんにちは。

続きまして『document.querySelector()』というのを紹介したいと思います。呼び方は「どきゅめんと」は省略されて「くえりーせれくたー」と呼ばれるのが一般的です。

これまで当サイトでは『document.getElementById()』や『document.getElementsByTagName()』などを紹介してきましたが『document.querySelector()』はCSSセレクタでHTML要素を指定することが可能です。

この『document.querySelector()』は比較的最近ブラウザに実装された関数(メソッド)になります。ちょうどHTML5が登場したあたりぐらいでしょうか。なのでIE7、IE6とかだと動かないです。IE8は一応動かすことができるのですが、たまにバグが出たりするので使う時はちゃんとそのソースコードが動いているか確認した方が良いかもしれません。

では使い方を見てみましょう。まず『document.querySelector()』と『document.querySelectorAll()』の2つが存在しています。『All』が付いているか付いていないかの違いがありますね。

『document.querySelector()』は指定された要素を1つ見つけるとそこで検索処理が終了します。たとえ要素が多数取得できる可能性があっても最初の1つしか取得しません。なので取得できるオブジェクトは1つだけです。『document.getElementById()』のような感じですね。もし要素が見つからなければ『null』が返ってきます。

対して『document.querySelectorAll()』の場合は指定された要素を全て取得します。なので取得した要素は配列(オブジェクト)として取得されます。『document.getElementsByTagName()』のような感じですね。要素が見つからない場合は空の配列として生成されます。

以下にサンプルを用意したので確認してみましょう。以下は『.innerHTML』で中身を書き換えています。

<div class="test">ここはclass属性に『test』と指定しているよ！</div>
<p>ここはp要素だよ！</p>
<p>ここはp要素だよ！</p>

<script>
var x = document.querySelector(".test");
var y = document.querySelectorAll("p");

x.innerHTML = "中身を変更したよ！その1";

for(var i = 0; i < y.length; ++i){
    y[i].innerHTML = "中身を変更したよ！その2";
}
</script>

まず処理のかけ方は問題ないかと思います。『document.querySelector()』の場合は取得できるオブジェクトがひとつなので『.innerHTML』と続けて記述すればOKです。

『document.querySelectorAll()』の場合は配列(オブジェクト)で取得されるので『y[0].innerHTML』といったようにインデックスを指定したあとに『.innerHTML』と続ける感じになりますね。取得した全ての要素に処理を加えたい場合は『for文』などと併用する必要があります。

注目すべきは『document.querySelector()』と『document.querySelectorAll()』の引数ですね。ここにCSSセレクタの記法で要素を指定することができます。

上記は『.test』と『p』と指定しています。なのでclass名『test』となっている要素とp要素が取得されます。

「p要素の中にいるspan要素」を取得したいといった場合は『p span』と記述します。「class名『hoge』となっているdiv要素の中のp要素」を取得したいといった場合は『div.hoge p』となります。

var x = document.querySelectorAll("p span"); // p要素の中にいるspan要素を取得
var y = document.querySelectorAll("div.hoge p"); // class名『hoge』となっているdiv要素の中のp要素を取得

さらにCSSセレクタの記法で直下の子要素のみを取得したりすることができます。

var x = document.querySelectorAll("div > *"); // div要素の直下にいる要素を全て取得

使用できるCSSセレクタの記法はブラウザによって大きな差がありますので注意してください。昨今のほぼ全ての最新ブラウザではCSS3のセレクタ記法が使えますが、IE8はCSS2までの記法しか使えなかったりします。

基本的に「スタイルシート(CSS)でサポートしているCSSセレクタ記法は『querySelector()』でも動かせるようにしましょう」ということになっているので通常のスタイルシートで動かせるCSSセレクタの記法は『querySelector()』でも使用できると考えて頂いて大丈夫です。

var x = document.querySelectorAll("#test"); // このように単純にid名から要素を取得する場合は『document.getElementById()』を使用しましょう。

というわけで『document.querySelector()』と『document.querySelectorAll()』の基本的な使い方はこんな感じになりますね。すごく強力な関数(メソッド)になりますのでバッチリ使いこなしてしまってください。

続いての記事ではJavaScriptでの『スコープ』について解説していきたいと思います。引き続き頑張っていきましょう。

ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

前の記事へ

次の記事へ

Tweet

シェア