documentとは？HTML操作の基本と実例【JavaScript入門】

本記事にはプロモーション（アフィリエイト広告）を含みます。

JavaScriptでページの文字やフォーム、画像、リンクを扱うときに見かけるのがdocumentです。ただし、これはページの内容そのものと同じ意味ではありません。

この記事では、documentとページの関係を図で整理し、コードを使ってページの内容を変更する方法を説明します。古い書き出し方法の注意点や、試すときにつまずきやすい点も確認できます。

documentはページの内容を扱う入口

documentは、ブラウザに表示されているHTML文書をJavaScriptから扱うためのオブジェクトです。ページの内容を読み取ったり、文字や要素を変更したりするときに使います。

たとえば、ブラウザのページ内でdocumentと書くと、現在表示しているページを扱えます。window.documentと書くこともできますが、通常のページ操作ではwindowを省いてdocumentと書けます。

ただし、documentはHTMLファイルの文字列そのものではありません。ブラウザがHTMLを読み取り、ページ内の部品をJavaScriptから扱える形にしたものと関係しています。

関係を簡単に表すと、HTML文書をもとにDOMが作られ、documentを通じてそのページの部品を扱います。

このように、documentはページを操作する入口で、実際に変更する対象はページ内の要素です。DOMの詳しい仕組みは、【JavaScript入門】DOMとは？仕組み・ノード・ツリー構造を初心者向けにわかりやすく解説で確認できます。

documentで文字・フォーム・画像・リンクを扱う

ここでは、入力欄に書いた名前をページに表示し、画像の説明文とリンク先も変更する例を紹介します。HTMLとJavaScriptを一つのファイルに書くため、保存してブラウザで開けば試せます。

次のコードをdocument-example.htmlという名前で保存してください。画像を表示するには、コードと同じ場所にsample.jpgという画像ファイルを置きます。別の名前の画像を使う場合は、コード内のファイル名も合わせて変更してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>documentの練習</title>
</head>
<body>
  <h1>ページ操作の練習</h1>

  <label for="nameInput">名前：</label>
  <input id="nameInput" type="text" value="花子">
  <button id="applyButton" type="button">表示を更新</button>

  <p id="result">ここに名前が表示されます。</p>

  <img id="sampleImage" src="sample.jpg" alt="サンプル画像" width="160">

  <p><a id="detailLink" href="#top">詳細を見る</a></p>

  <h2 id="details">詳細</h2>
  <p>リンク先になる見出しです。</p>

  <script>
    const button = document.getElementById("applyButton");

    button.addEventListener("click", function () {
      const name = document.getElementById("nameInput").value;
      const result = document.getElementById("result");
      const image = document.getElementById("sampleImage");
      const detailLink = document.getElementById("detailLink");

      result.textContent = name || "（名前が入力されていません）";
      image.alt = name ? name + "さんの画像" : "名前が入力されていません";
      detailLink.href = "#details";
    });
  </script>
</body>
</html>

コードでは、document.getElementById()で変更したい部品を見つけています。見つけた部品のtextContent、alt、hrefを書き換えることで、表示する文字や画像の説明、リンク先を変更します。

image.altは画像そのものを差し替えるのではなく、画像の代わりに伝える説明文を変更します。detailLink.hrefはリンクを押したときの移動先を変更します。

この例では、入力欄の名前を変更し、「表示を更新」を押します。入力した名前が文章に表示され、画像の説明文が変わります。リンクの移動先は「詳細」の見出しになります。

想定される結果：入力欄に「花子」と入れた状態でボタンを押すと、ページに「花子」と表示されます。画像の説明文は「花子さんの画像」に変わり、「詳細を見る」を押すと「詳細」の見出しへ移動します。

documentとHTML属性の違い

コードではimage.altやdetailLink.hrefを使いました。これらは、HTMLに書かれた画像やリンクの情報を、JavaScriptから読み書きするときのプロパティです。

HTMLに記述された属性と、JavaScriptから扱うプロパティは、対応していても常に同じものとは限りません。まずは、ページ上の部品を取得して、その情報や表示内容を変更する書き方として例を見てください。

入力欄の値を扱う例をさらに知りたい場合は、【JavaScript入門】value・defaultValue・textの使い方｜入力値・初期値・選択肢文字列を扱う方法も参考になります。

document.write()は何をする？

document.write()は、ページの読み込み中に文書へ文字を書き出すための機能です。次の例は、JavaScriptが実行された位置に「JavaScript」と表示する書き方です。

document.write("JavaScript");

想定される結果：ページ上に「JavaScript」と表示されます。

ただし、ページの読み込みが終わった後に呼び出すと、文書の内容を置き換えてしまう場合があります。状況によっては書き出しが行われないこともあるため、ページの一部を変更する目的には使わないでください。

ページの読み込み後に文字を追加したい場合は、追加する場所をHTMLに用意し、その部品の文字を変更する方法があります。たとえば、前の例ではresult.textContentを書き換えています。document.write()の詳しい使い方と注意点は、【JavaScript入門】document.writeとdocument.writelnの使い方｜違い・注意点・HTML出力の仕組みを解説で説明しています。

document.fgColorは使うべき？

document.fgColorは、ページ全体の文字色に関係する古いプロパティです。現代のページで文字色を変える場合は、ページ全体の色をまとめて変更するのではなく、対象の部品や見た目を指定して調整する方法を選びます。

古い色指定の詳しい説明は、【JavaScript入門】document.fgColorとは？文字色の取得・変更方法と注意点を初心者向けに解説を参照してください。

例が動かないときの確認方法

• ボタンを押しても変化しない：HTML内のidと、getElementById()に書いた名前が一致しているか確認します。
  補足：idとは？
  ページ内の部品を区別するために付ける名前です。コードで部品を探すときは、HTML側とJavaScript側の名前を同じにします。
• 画像が表示されない：sample.jpgがHTMLファイルと同じ場所にあるか、ファイル名の大文字・小文字も含めて確認します。
• 名前が表示されない：入力欄に文字を入れてからボタンを押したか、入力欄のidがコードと一致しているか確認します。
• リンクが移動しない：リンク先の#detailsと、移動先の見出しのidが一致しているか確認します。

コードの書き方が正しいかだけでなく、HTMLに指定した名前とJavaScriptで探す名前が一致しているかも確認してください。JavaScriptの読み込み位置やブラウザの違いによる問題が疑われる場合は、実際の環境で再現して記録する必要があります。

さらに学びたい人向けの書籍

仕様を確認できる資料

このページの説明を確かめるときは、次の資料を参照してください。document.write()は呼び出す状況によって動きが変わるため、特に実行条件を確認してください。

• WHATWG DOM Standard：ページ内の部品を扱う仕組みの仕様
• MDN Web Docs：Document.write()：書き出しの動作と注意点
• MDN Web Docs：Document.fgColor：古い文字色プロパティの説明
• MDN Web Docs：Window.document：window.documentの説明

ブラウザの種類やバージョンによる動作差を本文で断定するための検証記録はありません。仕様と実際の表示を照合するときは、使用したブラウザ名・バージョン・確認日を記録してください。