JavaScript超入門⑦ DOMとクリックイベントを使おう
querySelector、textContent、addEventListenerを使い、ボタンを押すと表示が変わるWebページを作ります。
第7回では、JavaScriptからHTMLを操作します。
ブラウザがHTMLを、JavaScriptから扱える形にしたものをDOMと呼びます。
HTML要素を取得する
<p id="message">ボタンを押してください</p>
<button id="changeButton">変更する</button>JavaScriptではquerySelectorを使って要素を取得できます。
const message = document.querySelector("#message");
const button = document.querySelector("#changeButton");#messageは、idがmessageの要素を選ぶ書き方です。
文字を変更する
message.textContent = "文字を変更しました";textContentへ新しい文字列を入れると、画面上の文章が変わります。
クリックイベント
button.addEventListener("click", () => {
message.textContent = "クリックされました";
});クリックや入力など、ブラウザで起きる出来事をイベントと呼びます。
addEventListenerは、指定したイベントが起きたときに関数を実行します。
完成したHTML
<!doctype html>
<html lang="ja">
<body>
<p id="message">ボタンを押してください</p>
<button id="changeButton">変更する</button>
<script>
const message = document.querySelector("#message");
const button = document.querySelector("#changeButton");
button.addEventListener("click", () => {
message.textContent = "クリックされました";
});
</script>
</body>
</html>scriptタグは、操作するHTML要素より後ろに置いています。HTMLが読み込まれた後で要素を探せるようにするためです。
小さな練習
ボタンをもう一つ追加し、押すと最初の文章へ戻るようにしてください。
模範解答
<p id="message">ボタンを押してください</p>
<button id="changeButton">変更する</button>
<button id="resetButton">元に戻す</button>
<script>
const message = document.querySelector("#message");
const changeButton = document.querySelector("#changeButton");
const resetButton = document.querySelector("#resetButton");
changeButton.addEventListener("click", () => {
message.textContent = "クリックされました";
});
resetButton.addEventListener("click", () => {
message.textContent = "ボタンを押してください";
});
</script>解説
新しいボタンには重ならないidを付け、querySelectorで取得します。resetButtonのクリックイベントでは、message.textContentへ最初と同じ文章を代入しています。
まとめ
- DOMを通してHTML要素を操作できます。
- querySelectorで要素を取得できます。
- addEventListenerでクリック時の処理を登録できます。