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

querySelector と querySelectorAll の２つ。

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

この2つのメソッドの違いは、 querySelector の場合、指定条件にあった 最初の１個だけ を抽出する。
一方、 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 」

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