8.2 モダンなDOM操作
8.2.1 querySelector と querySelectorAll
querySelector と querySelectorAll は、CSS セレクタを使って要素を取得できる強力なメソッドです。
querySelector
条件に一致する最初の 1 つの要素を取得します。
querySelectorAll
条件に一致するすべての要素を NodeList として取得します。
8.2.2 要素の取得と操作のプログラム
ソースフォルダ：public/ch08
ファイル名：dom-query.js
➢ dom-query.html
前の章で作った ch07/class-inheritance.html をコピーし、ch08 にペーストしてください。
その際に、ファイル名を dom-query.html に変更します。ファイル内の class-inheritance.html や class-inheritance.js の記述も、dom-query.html や dom-query.js に修正します。
さらに、ファイル内の記述を以下のように修正します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptの練習: dom-query.jsを実行中</title>
</head>
<body>
<h1 id="title">DOM操作の練習</h1>
<p class="message">これはメッセージです。</p>
<p class="message">これも別のメッセージです。</p>
<button id="changeBtn">クリックして変更</button>
<script src="dom-query.js"></script>
</body>
</html>
➢ dom-query.js
// dom-query.js
// 1. ID で要素を1つ取得
const title = document.querySelector("#title");
console.log(`タイトル: ${title.textContent}`);
// 2. クラスで要素をすべて取得
const messages = document.querySelectorAll(".message");
console.log(`メッセージの数: ${messages.length}`); // 2
// 3. ボタンをクリックしたときの処理
const button = document.querySelector("#changeBtn");
button.addEventListener("click", function() {
title.textContent = "タイトルが変更されました！";
alert("タイトルを変更しました");
});
実行結果
ブラウザのコンソールには以下のように表示されます：
ボタンをクリックすると、タイトルが「タイトルが変更されました！」に変わり、アラートが表示されます。
解説
4 行目では、querySelector を使って、ID が title の要素（h1 タグ）を取得しています。 #記号は ID を指定する CSS セレクタです。
4: const title = document.querySelector("#title");
5: console.log("タイトル: " + title.textContent);
8 行目では、querySelectorAll を使って、クラスが message の要素をすべて取得しています。 .記号はクラスを指定する CSS セレクタです。取得した要素は NodeList という配列のようなオブジェクトになります。
8: const messages = document.querySelectorAll(".message");
9: console.log("メッセージの数: " + messages.length); // 2
12 行目から 16 行目では、ボタンをクリックしたときにタイトルのテキストを変更する処理を定義しています。addEventListener の詳しい説明は、8.4 節で学習します。
12: const button = document.querySelector("#changeBtn");
13: button.addEventListener("click", function() {
14: title.textContent = "タイトルが変更されました！";
15: alert("タイトルを変更しました");
16: });