JavaScriptのDOM操作とは？getElementByIdなど基本の使い方を初心者向けに解説

1.はじめに：DOMって何？なぜ操作するの？
2.DOM操作の基本：documentオブジェクトとは
- 例：HTMLとJavaScript
3.getElementByIdの使い方（最もよく使うやつ）
- 基本の書き方
- 例：HTMLとJavaScript
4.他の取得方法：querySelectorとの違い
- 使い方の違い
5.テキストやHTMLを書き換えてみよう
- 1. textContent：テキストだけを変更
- 2. innerHTML：HTMLごと変更（太字や改行も）
6.まとめ：DOM操作をマスターすればUIが変わる
- おさらいポイント

1.はじめに：DOMって何？なぜ操作するの？

JavaScriptを使ってWebページを動かすとき、必ず出てくるのが**「DOM（ドム）」**という言葉です。

DOMとは「Document Object Model（ドキュメント・オブジェクト・モデル）」の略で、
HTMLの構造をJavaScriptから扱えるようにした仕組みのことを指します。

たとえば次のようなことができます：

ボタンをクリックしたら、テキストが変わる
入力フォームの内容を取得する
画像やスタイルを動的に切り替える

これらはすべて、「JavaScriptがDOMを通じてHTMLを操作している」からできることです。

DOMを理解しておくと、Webページを“動かす”力がグンと広がります。
この記事では、初心者の方に向けて、DOMの基本と代表的な操作方法をわかりやすく解説していきます。

2.DOM操作の基本：documentオブジェクトとは

JavaScriptからHTMLを操作するときは、document オブジェクトを使います。

この document は、ブラウザが読み込んだHTMLドキュメント全体を表すオブジェクトです。
JavaScriptはこのオブジェクトを通して、要素の取得・変更・追加などを行います。

例：HTMLとJavaScript

<h1 id="main-title">Welcome!</h1>

const title = document.getElementById("main-title");
title.textContent = "ようこそ、JavaScriptの世界へ！";

このコードでは、<h1> 要素を getElementById() で取得し、
その中のテキストを "ようこそ、JavaScriptの世界へ！" に書き換えています。

このように、document オブジェクトは「ページ上の要素を操作する入口」として使われる非常に重要な存在です。

次のセクションでは、この中でも最も基本的でよく使われる getElementById() について詳しく見ていきましょう。

3.getElementByIdの使い方（最もよく使うやつ）

getElementById() は、HTML内の特定の要素を「ID」で取得する方法です。
JavaScriptでDOM操作をするとき、最もよく使う基本メソッドのひとつです。

基本の書き方

document.getElementById("ID名");

例：HTMLとJavaScript

<p id="message">こんにちは！</p>

const element = document.getElementById("message");
element.textContent = "こんばんは！";

このコードを実行すると、ページ上の「こんにちは！」が「こんばんは！」に変わります。

ポイント

IDはHTML内で1つだけ使われる名前
#（シャープ）は不要（CSSと違って）
要素の中身（テキストなど）を操作するには .textContent や .innerHTML を使う

4.他の取得方法：querySelectorとの違い

getElementById() は ID で要素を取得する最も基本的な方法ですが、
より柔軟に使えるのが querySelector() です。

querySelector() は CSSのセレクターを使って1つの要素を取得できます。

使い方の違い

// IDで取得（getElementById）
document.getElementById("title");

// IDで取得（querySelector）
document.querySelector("#title");

// クラスで取得
document.querySelector(".content");

// タグ名で取得
document.querySelector("p");

比較まとめ

方法	セレクター指定	取得数	よく使う場面
getElementById	IDのみ	1つ	単体の特定要素（最速）
querySelector	CSS全般	最初の1つ	クラスやタグ名も使いたいとき

なお、同じクラス名の要素が複数ある場合は、
querySelectorAll() を使ってまとめて取得することもできます。

const items = document.querySelectorAll(".list-item");

5.テキストやHTMLを書き換えてみよう

DOM操作では、HTML要素の中身をJavaScriptで書き換えることができます。
よく使われるのが以下の2つのプロパティです。

1. textContent：テキストだけを変更

textContent は要素の中の「文字情報だけ」を書き換えたいときに使います。

実践デモ：クリックで天気情報を変更

👇以下のボタンをクリックしてみてください。

今日の天気は晴れです。

<div style="text-align: center; margin: 20px;">
  <p id="weather" style="font-size: 1.5rem;">今日の天気は晴れです。</p>
  <button id="changeBtn" style="padding: 10px 20px; font-size: 1rem;">明日の天気を見る</button>
</div>

const btn = document.getElementById("changeBtn");
  const weatherText = document.getElementById("weather");

  btn.addEventListener("click", () => {
    weatherText.textContent = "明日の天気は雨です。傘を忘れずに☔";
  });

この例では、

<p id="weather"> を getElementById() で取得し
textContent を使って中身の文字を上書きしています

2. innerHTML：HTMLごと変更（太字や改行も）

innerHTML を使えば、HTMLタグごと中身を入れ替えることができます。

例：

<div style="text-align: center; margin: 20px;">
  <p id="info" style="font-size: 1.2rem;">ログインしてください。</p>
  <button id="infoBtn" style="padding: 10px 20px; font-size: 1rem;">ログインする</button>
</div>

<script>
  const infoBtn = document.getElementById("infoBtn");
  const infoText = document.getElementById("info");

  infoBtn.addEventListener("click", () => {
    infoText.innerHTML = "<strong>ログインに成功しました！</strong><br>マイページへ進んでください。";
  });
</script>

ログインしてください。