querySelectorとquerySelectorAll

スポンサーリンク


スタイルシートのセレクタを使ってDOMにアクセス出来る2つのメソッドが超便利な件。

querySelectorquerySelectorAllの2つ。

どちらも同じで、document.querySelector(‘div.entry p’)のようにセレクタでアクセスできる。

この2つのメソッドの違いは、querySelectorの場合、指定条件にあった最初の1個だけを抽出する。
一方、querySelectorAllの時は、指定条件にあうすべての要素を抽出する。

たとえば、次のようなHTMLがあったとする。

<div class="entry">
<p class="hoge">こんにちは。<br />
今日はとっても天気がいいですね!</p>
<p>これはペンです。</p>
<p class="hoge">さようなら。</p>
</div>

これに対してpタグを見つけたい場合

document.querySelector(‘div.entry p’)だと、最初の
<p class=”hoge”>こんにちは。<br />
今日はとっても天気がいいですね!</p>

だけを抽出する。

一方、document.querySelectorAll(‘div.entry p’)なら<div class=”entry”>~</div>の中にある、
すべてのpタグをまとめて抽出してくれる。

そして、querySelectorAllは、配列のように添字でアクセスできる。

var p=document.querySelector('div.entry p');
p.style.color='#ff0000';

とすると、
こんにちは。
今日はとっても天気がいいですね!

というように、最初のpタグだけが赤くなる。

一方

var p=document.querySelectorAll('div.entry p');

for(var i=0;i<p.length;i++){
	p[i].style.color='#ff0000';
}

とすれば、すべてのpタグが赤くなる。

querySelectorAllには、lengthがあるが、querySelectorには、lengthがないので注意。

セレクタでアクセス出来るので、var p=document.querySelectorAll(‘div.entry p.hoge‘);と指定すれば、
hogeクラスのpタグだけが抽出される。

CSSのセレクタに関しては次のページが参考になります。
意外と知らない!?CSSセレクタ20個のおさらい|Webpark

本当にこれは便利です!
実際にこのメソッドを使ってソースを書いてみました。下がその記事です。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください