🚀 プログラミング学習

レッスン6：DOMを操作しよう

📖 導入 — JavaScriptでページを「動かす」

これまでのレッスンでは、コンソールやアラートに表示するだけでページ自体は変わりませんでしたよね。このレッスンでは、JavaScriptからHTMLの要素を直接操作して、ページの内容をリアルタイムに変える方法を学びます。ここからが「本物のウェブアプリ」への第一歩です！

📝 DOM操作の基本

📖 DOMとは：「Document Object Model」の略。ブラウザがHTMLを読み込んだとき、各タグを「操作できる部品」として管理する仕組み。document.getElementById() などでHTMLの要素を取得・変更できるのはDOMのおかげ。

DOMとは？

DOM（Document Object Model）は、ブラウザがHTMLを読み込んだときに作る「ページの設計図」です。JavaScriptはこのDOMを通じて、HTMLの要素を取得・変更・追加できます。

要素を取得する

// id で取得
const title = document.getElementById("title");

// CSSセレクタで取得（id・class・タグ名）
const title = document.querySelector("#title");
const btn   = document.querySelector(".btn");
const p     = document.querySelector("p");

要素の内容・スタイルを変える

const title = document.getElementById("title");

title.textContent = "テキストが変わった！";  // テキストを書き換え

title.style.color    = "red";               // 文字色を変更
title.style.fontSize = "32px";              // 文字サイズを変更

💡 CSSでは font-size とハイフンで書きますが、JavaScriptでは fontSize とキャメルケース（単語の先頭を大文字）で書きます。

クリックに反応する：onclick

<button onclick="handleClick()">クリック</button>
function handleClick() {
  console.log("ボタンが押された！");
}

💻 やってみよう！

ボタンを押すたびにメッセージが切り替わるページを作ります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>DOM操作の練習</title>
  </head>
  <body>
    <h1 id="message">こんにちは！</h1>
    <button onclick="changeMessage()">メッセージを変える</button>

    <script>
      let count = 0;
      const messages = ["こんにちは！", "やあ！", "ようこそ！", "はじめまして！"];

      function changeMessage() {
        count = (count + 1) % messages.length;
        document.getElementById("message").textContent = messages[count];
      }
    </script>
  </body>
</html>

💡 count % messages.length は「配列の最後まで来たら0に戻る」という計算です。% は割り算の余りを求める演算子です。

📌 まとめ

操作書き方
id で要素を取得document.getElementById("id名")
CSSセレクタで取得document.querySelector("セレクタ")
テキストを変更要素.textContent = "新しいテキスト"
スタイルを変更要素.style.プロパティ名 = "値"
クリックに反応<button onclick="関数名()">

🚀 次のレッスンへ

次のレッスンでは、これまでの知識をすべて使ってToDoリストアプリを作ります！

🔍 もっと調べてみよう：「JavaScript DOM操作 getElementById」で検索してみよう。わからないことはどんどん検索する習慣をつけよう！
← JavaScriptコース一覧に戻る