DOMの構造における「Documentオブジェクト」

Documentオブジェクトは、DOM (Document Object Model) の中核的なオブジェクトであり、HTMLやXML文書全体を表現するルートノードの役割を持ちます。つまり、DOMツリー構造の最上位に位置し、ページ全体の内容にアクセスしたり操作したりするための出発点となります。

1. 役割と位置づけ

  • DOMツリーのルートを形成する。

  • 各種ノード（Elementノード、Textノード、Attributeノードなど）を包含する。

  • JavaScriptを介して文書全体を参照・操作するための入り口を提供する。

例えば、document はブラウザ環境においてグローバルに提供される変数であり、ページのHTML構造にアクセスする最も基本的な手段です。

2. 主なプロパティ

Documentオブジェクトは多数のプロパティを持ち、文書の情報にアクセスできます。

  • document.title: 文書のタイトルを取得・設定。

  • document.URL: 文書のURLを取得。

  • document.domain: 文書のドメイン名。

  • document.referrer: 現在のページに遷移してきた参照元URL。

  • document.cookie: クッキーの読み書き。

3. 主なメソッド

DocumentオブジェクトはDOM要素の検索や生成を行う多様なメソッドを備えています。

  • 検索系

    • getElementById(id): 指定したIDを持つ要素を返す。

    • getElementsByTagName(tag): 指定タグ名の要素集合を返す。

    • getElementsByClassName(class): 指定クラス名を持つ要素集合を返す。

    • querySelector(selector): CSSセレクタに一致する最初の要素を返す。

    • querySelectorAll(selector): CSSセレクタに一致するすべての要素を返す。

  • 生成系

    • createElement(tag): 新しい要素ノードを作成。

    • createTextNode(text): 新しいテキストノードを作成。

  • 操作系

    • write(): 文書に文字列を直接書き込む（通常は非推奨）。

    • open() / close(): 文書ストリームを開閉。

4. DOM全体との関係

Documentオブジェクトは「文書全体」を表すため、DOMツリーの中でルートノード (最上位ノード) として存在します。
以下のように、HTML文書を扱う場合は常に document からアクセスを始めます。

html
<!DOCTYPE html>
<html>
<head>
  <title>サンプルページ</title>
</head>
<body>
  <h1 id="headline">見出し</h1>
  <p class="text">段落1</p>
  <p class="text">段落2</p>
</body>
</html>

javascript
// タイトルを取得
console.log(document.title); // "サンプルページ"

// IDで要素取得
let headline = document.getElementById("headline");
headline.textContent = "タイトル変更";

// クラスで要素取得
let paragraphs = document.getElementsByClassName("text");
console.log(paragraphs.length); // 2

まとめ

  • DocumentオブジェクトはDOMのルートであり、文書全体を表現する。

  • プロパティを通じて文書情報にアクセスできる。

  • メソッドを通じて要素の検索・生成・操作が可能。

  • Web開発におけるDOM操作の出発点である。

ChatGPT5 生成日：2025/09/11