【6日でできるJavaScript入門】要素の取得と変更

　Webページを動的に制御する際、JavaScriptはDOM要素を「取得」して「変更」することで画面に変化をもたらします。本記事では、要素取得の基本から、取得した要素のテキスト・HTML構造を切り替える手順をステップごとに解説します。

素材のダウンロード

以下のリンクから画像素材をダウンロードできます。

retrieving-modifying-elements ダウンロード

１．要素の取得

　JavaScriptでDOM要素を操作するには、対象の要素をまず取得する必要があります。最もよく使われるメソッドは document.getElementById() です。

メソッド	説明
`document.getElementById(id)`	指定したID属性を持つ要素を1つ取得

1.1. サンプルHTML：クイズ表示部分取得

ファイル名： lesson09-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>🔎 要素取得テスト</title>
  <style>    #message { border: 2px solid #33CC33; padding: 10px; width: 300px; margin-top: 20px; }
  </style>
</head>
<body>
  <h1>🌏 クイズ</h1>
  <p>世界で最も人口が多い国は？ <button onclick="showAnswer()">解答を見る</button></p>
  <div id="message">ここに答えが表示されます。</div>

  <script>
    function showAnswer() {
      let msgBox = document.getElementById('message');
      console.log(msgBox);
    }
  </script>
</body>
</html>

コード解説

getElementById('message') で <div id="message"> を取得
取得要素は HTML 要素オブジェクトとして変数に格納できる

1.2. 大文字／小文字の区別に注意

// 誤り
document.getElementByID('message');
document.getElementById('Message');

// 正しい
document.getElementById('message');

対象	説明
メソッド名	`getElementById` の綴りと大文字に注意
ID名	HTML と同じ大文字／小文字で指定

２．要素内の文字の変更

取得した要素のテキストを置き換えるには、.textContent を使用します。

2.1. サンプルHTML: 回答を表示

ファイル名： lesson09-2.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>✏️ 文字変更テスト</title></head>
<body>
  <h1>🌏 クイズ</h1>
  <p>世界で最も人口が多い国は？ <button onclick="showAnswer()">解答を見る</button></p>
  <div id="message">ここに答えが表示されます。</div>

  <script>
    function showAnswer() {
      let msgBox = document.getElementById('message');
      msgBox.textContent = 'インドです。';
    }
  </script>
</body>
</html>

ブラウザの出力例

ボタンを押すと「インドです。」に書き換わる

コード解説

msgBox.textContent = '...' でテキストを設定
.textContent は純粋な文字列を対象

３．変数を使わずに処理する

変数を省略し、要素取得と文字変更を1行で記述できます。

3.1. サンプルHTML: ダイレクト操作

ファイル名： lesson09-3.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>⚡ 直書きテスト</title></head>
<body>
  <h1>🌏 クイズ</h1>
  <p>世界で最も人口が多い国は？ <button onclick="showAnswer()">解答を見る</button></p>
  <div id="message">ここに答えが表示されます。</div>

  <script>
    function showAnswer() {
      document.getElementById('message').textContent = 'インドです。';
    }
  </script>
</body>
</html>

ブラウザの出力例

コード解説

変数 msgBox を使わず、チェーンで直接操作

４．要素内のHTMLを書き換える

テキストだけでなく、HTML構造を変更するには .innerHTML を使います。

4.1. サンプルHTML: マークアップ追加

ファイル名： lesson09-4.html

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>🌟 HTML書換えテスト</title></head>
<body>
  <h1>🌏 クイズ</h1>
  <p>世界で最も人口が多い国は？ <button onclick="showAnswer()">解答を見る</button></p>
  <div id="message">ここに答えが表示されます。</div>

  <script>
    function showAnswer() {
      let msgBox = document.getElementById('message');
      msgBox.innerHTML = '<strong>インド</strong>です。<br><img src="india_flag.png" alt="インド国旗" width="100">';
    }
  </script>
</body>
</html>

ブラウザの出力例

「インド」の文字が太字化し、国旗画像が表示される。

コード解説

innerHTML に HTML 文字列を渡すと、要素内を再構築
<strong> や <img> も自由に挿入可能

まとめ

本記事では、

getElementById() による要素取得
.textContent でのテキスト更新
変数を使わない1行操作
.innerHTML によるHTML書換え

　を学びました。DOM操作の基本を身につけ、次は イベントリスナー を組み合わせたインタラクティブなUI構築へと進みましょう。

【6日でできるJavaScript入門】要素の取得と変更