シェアする
querySelector(): Getting Elements with CSS Selectors - Japanese Only
みなさまどうもこんにちは。
続きまして『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()』でも使用できると考えて頂いて大丈夫です。
こんな感じでとっても便利な『document.querySelector()』と『document.querySelectorAll()』ですが、処理速度はそこまで早くありませんのでそこは少し気を付けて下さい。
特にid名からの要素取得を行う場合は『document.getElementById()』が最速になりますのでこちらを使うほうが無難です。
var x = document.querySelectorAll("#test"); // このように単純にid名から要素を取得する場合は『document.getElementById()』を使用しましょう。
というわけで『document.querySelector()』と『document.querySelectorAll()』の基本的な使い方はこんな感じになりますね。すごく強力な関数(メソッド)になりますのでバッチリ使いこなしてしまってください。
続いての記事ではJavaScriptでの『スコープ』について解説していきたいと思います。引き続き頑張っていきましょう。
ではー。
This article was written by Sakurama.
Author's beloved small mammal |
桜舞 春人 Sakurama HarutoA Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him. |
If you find any errors or copyright issues, please contact us.
