IT初心者の分かったメモ

1. はじめに

Webサイトを制作していると、「文字や画像をクリックで変更したい」といった動きを取り入れたくなる場面が出てくるかもしれません。そこで登場するのが JavaScriptのdocumentオブジェクト です。documentオブジェクトは、HTMLの要素をJavaScriptから自由に操作するための入り口ともいえる存在です。この仕組みを理解すると、文字の書き換えやデザインの変更など、Webページを静的なものから動的なものへと進化させる第一歩となります。
この記事では、初心者の方にも分かりやすいように次の流れで解説していきます。

• documentオブジェクトとは何か
• 要素を「探す」方法
• 要素を「変える」方法
• 実際の実装例（クリックで文字が変わる）

2. documentオブジェクトとは？

documentオブジェクトとは、Webページの内容（HTML）をJavaScriptから操作するために必要なオブジェクトです。イメージとしては、ブラウザがページを読み込んだ際に、HTML全体をまとめたもの（＝document）を自動で用意してくれる、といった感じです。
見出しを変更したい、画像を差し替えたいといったとき、JavaScriptは必ずこのdocumentを通じて要素にアクセスします。つまり、documentはJavaScriptとHTMLをつなぐ「窓口」のような存在なのです。

3. 要素を探す方法

documentを使えば、ページ内の特定の要素を探して取り出すことができます。ここでは代表的な3つの方法を紹介します。

HTML
<h1 id="title">こんにちは</h1>

JavaScript
const heading = document.getElementById("title");
console.log(heading); 
// <h1 id="title">こんにちは</h1>

HTML
<p class="text">文章です</p>

JavaScript
const p = document.querySelector(".text");
console.log(p);
// <p class="text">文章です</p>

HTML
<ul>
  <li class="item">りんご</li>
  <li class="item">みかん</li>
  <li class="item">ぶどう</li>
</ul>

JavaScript
const items = document.querySelectorAll(".item");
items.forEach(el => console.log(el.textContent));

4. 要素を変更する方法

取得した要素はJavaScriptから自由に操作できます。代表的な変更方法をいくつか紹介します。

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

JavaScript
heading.innerText = "こんばんは！";

HTML
<img id="mainImg" src="apple.jpg" alt="りんご">

JavaScript
const img = document.getElementById("mainImg");
img.src = "orange.jpg";
img.alt = "みかん";

HTML
<p id="highlight">強調したい文章</p>

JavaScript
const text = document.getElementById("highlight");
text.style.color = "red";
text.style.fontSize = "20px";

5. documentを使うと実装できる機能の例

ここまでで要素を取得して変更する方法を紹介しました。では、この仕組みを使うとWebサイトでどのようなことが実装できるのでしょうか。代表的な例をいくつか挙げてみます。

• ナビゲーションメニューの開閉（ハンバーガーメニュー）
  スマホサイトでよくある「三本線のアイコンを押すとメニューが出てくる」仕組みは、document を使ってメニュー要素の表示・非表示を切り替えることで実現します。
• タブ切り替え
  FAQや商品紹介ページなどでよく見る「タブをクリックすると内容が切り替わるUI」も、クリックイベントとdocument.querySelectorで要素を入れ替えるだけで作れます。
• モーダルウィンドウ（ポップアップ表示）
  画像やボタンをクリックしたときに画面中央にポップアップを表示する仕組みも、document で要素を操作してスタイルを変更することで実装可能です。
• フォームの入力チェック
  入力欄を取得して「空欄ならエラーを表示する」といったバリデーション処理も、document があれば簡単に行えます。
• スクロールに応じた演出
  ページを下にスクロールしたときに要素をふわっと表示させたり、「トップに戻るボタン」を出す処理にも使えます。

このように、documentを使うことでユーザーの操作に応じた動きのあるWebページを作ることができます。

6. イベントと組み合わせる

要素を取得して操作するだけでなく、ユーザーの操作（イベント）に応じて動作させることで、よりインタラクティブな仕組みを実現できます。
サンプルとして「ボタンをクリックすると文字が変わる」例を紹介します。

HTML
<button id="btnSample">押してみる</button>
<p id="msgSample">ここが変わります</p>

JavcaScript
const btnSample = document.getElementById("btnSample");
const msgSample = document.getElementById("msgSample");

btnSample.addEventListener("click", () => {
msgSample.innerText = "ボタンが押されました！";
});

このようにイベントと組み合わせることで、Webページを「ユーザーの操作に反応する仕組み」へと進化させることができます。

7. まとめ

この記事では、documentオブジェクトを使ってHTML要素を操作する基本を解説しました。

• documentオブジェクトは、HTMLをJavaScriptから操作するための入り口
• 要素はgetElementByIdやquerySelectorで取得できる
• 取得した要素は innerText/innerHTML/style などで変更できる
• 実装できる機能の例として、ハンバーガーメニュー・タブ切り替え・モーダル・フォームチェック・スクロール演出 などがある
• イベントと組み合わせることで「クリックで変わる」など動的なWebページが作れる

まずは小さな例から試して、documentを通じて「Webページをコントロールできる感覚」をつかんでみてください。