この記事では、JavaScriptのquerySelectorについて解説します。
querySelectorはjQueryのような書き方で簡単に要素を指定できるのが特徴です。
id名やclass名を意識せずに操作できます。
querySelectorとquerySelectorAllがあります。両方見ていきましょう。
querySelector
querySelectorの使い方
querySelectorは指定したセレクタに一致するもので、最初のものを返します。
実際にquerySelectorを使ってみましょう。
<ul id="cat">
<li class="cat_1">カテゴリ1</li>
<li class="cat_2">カテゴリ2</li>
<li class="cat_3">カテゴリ3</li>
</ul>
querySelectorを'#cat1 .cat1_li'を指定します。すると最初の要素が返ってきます。
var list = document.querySelector('#cat .cat_1');
console.log(list);
// => <li class="cat_1">querySelectorAll
querySelectorAllの使い方
querySelectorAllは指定したセレクタに一致するものを全て返します。
はじめに一致したものだけを返すquerySelectorとは動作が異なります。
実際にquerySelectorAllを使ってみましょう。
<ul id="cat1">
<li class="cat1_li">カテゴリ1</li>
<li class="cat1_li">カテゴリ2</li>
<li class="cat1_li">カテゴリ3</li>
</ul>
<ul id="cat2">
<li class="cat2_li">カテゴリ1</li>
<li class="cat2_li">カテゴリ2</li>
<li class="cat2_li">カテゴリ3</li>
</ul>querySelectorAllを'#cat1 .cat1_li'を指定します。すると該当するすべてが配列で返ってきます。
var list_array = document.querySelectorAll('#cat1 .cat1_li');
console.log(list_array);
// => [li.cat1_li, li.cat1_li, li.cat1_li]デモ
カテゴリ名をクリックすると、カテゴリの説明文が表示されるというプログラムです。
サンプルコード
<ul class="cat">
<li class="cat_li">
<strong>カテゴリ1</strong>
<p>カテゴリ1の説明カテゴリ1の説明<br>カテゴリ1の説明</p>
</li>
<li class="cat_li">
<strong>カテゴリ2</strong>
<p>カテゴリ2の説明カテゴリ2の説明<br>カテゴリ2の説明</p>
</li>
</ul>li.cat_li strong {
cursor: pointer;
}
li.cat_li p {
display: none;
}var list_array = document.querySelectorAll('.cat_li');
for (var i=0; i< list_array.length; i++) {
list_array[i].onclick = function() {
this.lastElementChild.style.display = 'block';
}
}document.querySelectorAll('.cat_li')でclass名にcat_liを持つ要素を取得します。
ループを回し、cat_liを持つ<li>がクリックされたら、<li>のlastElementChildである<p>要素が表示されます。
