複数要素のDOM操作（読み込みと書き込み）

DOM（Document Object Model）操作は、読み込みと書き込みに集約されます。
単一の要素に対する読み書きは、querySelectorを使用して実現できました。

今回は、複数の要素に対するDOM操作について説明します。

単一要素の読み込みと書き込みについては、直前の記事『DOMの読み込みと書き込み』をご確認ください。

1 querySelectorAll
- 1.1 querySelectorのサンプル
- 1.2 querySelectorAllのサンプル
2 練習問題
3 まとめ
- 3.1 練習問題の解答

querySelectorAll

単一要素のDOM操作にquerySelectorメソッドを使用したのに対し、複数要素にはquerySelectorAllメソッドを使用します。

次のようなHTMLがあるとします。

<!-- ここより上は省略-- >
<body>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>
</body>
</html>

すべてのpタグの内容を「Hello」から「Good Morning」に変更したいと思いました。

querySelectorで要素セレクタを指定すると、どうなるか見てみましょう。

querySelectorのサンプル

<!-- ここより上は省略-- >
<body>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>

  <script>
  document.querySelector("p").textContent = "Good Morning";
  </script>
</body>
</html>

ブラウザ

Good Morning
Hello
Hello

👆このように、最初のpタグの内容のみが書き換えられました。

では次に、querySelectorAllを使って、セレクタに該当するすべての要素を書き換えるサンプルを示します。

querySelectorAllのサンプル

<!-- ここより上は省略-- >
<body>
  <p>Hello</p>
  <p>Hello</p>
  <p>Hello</p>

  <script>
  // セレクタに該当する要素の複数ノードを取得する
  let pNodes = document.querySelectorAll("p");

  // for…ofループ
  for (p of pNodes) {
    p.textContent = "Good Morning";
  }
  </script>
</body>
</html>

ブラウザ

Good Morning
Good Morning
Good Morning

👆このように、すべてのpタグの内容の書き換えに成功しました。

querySelectorAllメソッドは、NodeListというデータ型のオブジェクトを返します。
NodeListは列挙可能（イテラブル）オブジェクトであるため、for…ofでのループに適しています。

for…ofループについて詳しく知りたい方は、記事『JavaScriptの繰り返し（ループ）処理 ②』の「for…ofでのループ処理」の項をご確認ください。

練習問題

問①
次のHTMLで、「target」というclassが設定されているpタグの内容を「対象」に書き換えてください。

<!-- ここより上は省略-- >
<body>
  <p>Hello</p>
  <p class="target">Hello</p>
  <p class="target">Hello</p>

  <script>
  // ここにプログラムを追加
  </script>
</body>
</html>

問②
次のHTMLに含まれる仕様上の問題を見つけてください。

<!-- ここより上は省略-- >
<body>
  <p>Hello</p>
  <p id="target">Hello</p>
  <p id="target">Hello</p>
</body>
</html>

まとめ

単一のDOM要素を操作するにはquerySelectorを使用し、複数の場合はquerySelectorAllを使用する
querySelectorAllメソッドはNodeList型のオブジェクトを返すので、for…ofで繰り返し処理できる

このように、querySelectorとquerySelectorAllを使うことで、ほとんどのDOM操作は自由自在です。

練習問題の解答

問①の解答例

<!-- ここより上は省略-- >
<body>
  <p>Hello</p>
  <p class="target">Hello</p>
  <p class="target">Hello</p>

  <script>
  let pNodes = document.querySelectorAll(".target");

  for (p of pNodes) {
    p.textContent = "対象";
  }
  </script>
</body>
</html>

問②の解答

「id=”target”」が2か所に記述されている点。

HTMLの仕様では、同一のid属性は1ページ内に複数存在してはならないため、いずれかをclassにするか、あるいは別々のidにするのが望ましい。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。

それでは、最後までお読みいただきありがとうございます。

『詳説 JavaScript』メニューに戻る