広告

posted by fanblog
「ここにブログの名前を入れます」は更新を終了しました。記事はすべて新ブログ「Big Bang」に移転済みです。記事のタイトルをクリックすると新ブログの該当記事に移動します。そちらでお楽しみください。

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

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

新ブログ「Big Bang」で続きを読む