JavaScript

querySelector・querySelectorAllを使って要素を取得する【JavaScript】

この記事では、JavaScriptのquerySelectorについて解説します。

querySelectorはjQueryのような書き方で簡単に要素を指定できるのが特徴です。

id名やclass名を意識せずに操作できます。

querySelectorquerySelectorAllがあります。両方見ていきましょう。

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>要素が表示されます。


ウェブつくを支えてくれるスポンサー

  • この記事を書いた人

ウェブつく管理人

WEB制作の仕事をしています。より簡潔に、より分かりやすく解説していきたいと思い、サイトを運営しています。「読むのが苦にならないサイト」を目指しています。よろしくお願いします。

-JavaScript

© 2021 ウェブつく Powered by AFFINGER5