【6日でできるJavaScript入門】複数の要素を取得する

　単一要素の取得に続き、複数要素を一度に扱う方法を学びましょう。document.querySelectorAll() を使うと、CSSセレクタで指定したすべての要素が配列（NodeList）として取得できます。ここでは、セレクタの基本から、要素の絞り込み、取得した複数要素への操作まで、ステップごとに解説します。

１．セレクタを使った要素の取得

CSSライクな記法で複数要素をまとめて取得するには querySelectorAll を使います。

メソッド	説明
`document.querySelectorAll(sel)`	CSSセレクタ `sel` にマッチする全要素を取得

1.1. サンプルHTML：会場・日程の取得

ファイル名： lesson10-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📋 複数要素取得サンプル</title>
</head>
<body>
  <h1>🗓️ 会場と日程</h1>
  <ul id="schedule">
    <li>仙台（10/2）</li>
    <li>東京（10/4）</li>
    <li>横浜（10/6）</li>
    <li>新潟（10/8）</li>
  </ul>
  <ul id="games">
    <li>サッカー</li>
    <li>野球</li>
    <li>ラグビー</li>
  </ul>
  <button onclick="getItems()">要素を取得</button>
  <script>
    function getItems() {
      const items = document.querySelectorAll('li');
      console.log(items); // NodeList(7) [...] と表示される
    }
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

コンソールに NodeList(7) として7個のli要素が一覧表示される。

NodeList(7) [li, li, li, li, li, li, li]

コード解説

querySelectorAll('li')：全ての<li>要素をまとめて取得
返り値は配列のような NodeList オブジェクト

1.2. セレクタとは？

CSSのセレクタは「どの要素」を指定するかを表す文字列です。

セレクタ	説明	例
要素名	タグ名で指定	`div`, `li`
クラス名	`.` + クラス名	`.item`
ID名	`#` + ID名	`#schedule`

２．取得する要素を絞り込む方法

複数要素の中から特定の範囲だけを取得するには、親子関係を表すセレクタを使います。

記述例	説明
`#schedule li`	`id="schedule"` の中にある全ての `li` 要素を取得
`ul#games > li`	`games` 直下の `li` のみ取得

2.1. サンプルHTML：会場のみ絞り込み

ファイル名： lesson10-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔍 絞り込みサンプル</title></head>
<body>
  <h1>🗓️ 会場と日程</h1>
  <ul id="schedule">
    <li>仙台（10/2）</li>
    <li>東京（10/4）</li>
    <li>横浜（10/6）</li>
    <li>新潟（10/8）</li>
  </ul>
  <ul id="games">
    <li>サッカー</li>
    <li>野球</li>
    <li>ラグビー</li>
  </ul>
  <button onclick="getSchedule()">会場取得</button>
  <script>
    function getSchedule() {
      const scheduleItems = document.querySelectorAll('#schedule li');
      console.log(scheduleItems); // NodeList(4)
    }
  </script>
</body>
</html>

ブラウザの出力例

デバックコンソールの出力

NodeList(4) [li, li, li, li]

コード解説

'#schedule li'： ID schedule を親として、その中の li 要素を取得

2.2. 半角スペースを使った絞り込み

セレクタの中に半角スペースを入れることで「子孫要素」を指定できます。

書式	意味
`A B`	`A` の中にある全ての `B`
`A > B`	`A` の直下にある `B` のみ

３．複数要素の文字を書き換える

取得した NodeList は forEach や for でループ処理し、.textContent を変更できます。

3.1. サンプルHTML：地域別入れ替え

ファイル名： lesson10-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🔄 複数要素更新サンプル</title></head>
<body>
  <h1>🗾 地域別ツアー</h1>
  <ul id="schedule">
    <li>仙台（10/2）</li>
    <li>東京（10/4）</li>
    <li>横浜（10/6）</li>
    <li>新潟（10/8）</li>
  </ul>
  <button onclick="showWest()">西日本ツアー</button>
  <button onclick="showEast()">東日本ツアー</button>
  <script>
    const east = ['仙台（10/2）','東京（10/4）','横浜（10/6）','新潟（10/8）'];
    const west = ['大阪（10/12）','京都（10/14）','神戸（10/16）','広島（10/18）'];
    let items = document.querySelectorAll('#schedule li');

    function showWest() {
      items.forEach((el, i) => el.textContent = west[i]);
    }
    function showEast() {
      items.forEach((el, i) => el.textContent = east[i]);
    }
  </script>
</body>
</html>

ブラウザの出力例

コード解説

.forEach((el, i) => ...) で各要素にインデックス付きでアクセス
el.textContent でテキストを一括更新

まとめ

querySelectorAll() で複数要素を一度に取得
CSSセレクタで範囲を絞り込む方法（A B, A > B）
取得した NodeList をループで操作
.textContent や .innerHTML でまとめて更新

以上をマスターして、リスト管理やダイナミックなUI更新を効率的に行いましょう。

【6日でできるJavaScript入門】複数の要素を取得する