JavaScript/DOM/Document

Document（ドキュメント）

JavaScriptにおける「Document（ドキュメント）」オブジェクトは、ウェブページの内容を操作するために使用される中心的なオブジェクトです。これは、DOM（Document Object Model）の一部であり、HTMLやXML文書の構造にアクセスして操作するためのインターフェースを提供します。

Documentオブジェクトの役割

Documentオブジェクトは、ウェブページの内容をプログラムから操作するための基本的なインターフェースです。JavaScriptからHTML要素を動的に操作したり、新しい要素を追加したり、既存の要素を変更したりすることができます。

主な機能

1. ドキュメントのアクセス

Documentオブジェクトは、documentというグローバル変数として自動的に提供され、現在表示されているウェブページの内容を指し示します。

例

console.log(document);  // 現在のドキュメント情報を表示

2. 要素の取得

Documentオブジェクトには、ページ内のHTML要素を取得するためのメソッドがいくつか用意されています。例えば、getElementById()やgetElementsByClassName()、querySelector()などがあります。

例

let element = document.getElementById("myElement");

3. 新しい要素の作成

Documentオブジェクトを使って、新しいHTML要素を作成し、ページに追加することができます。createElement()を使って新しい要素を生成し、appendChild()を使ってその要素を追加できます。

例

let newDiv = document.createElement("div"); newDiv.textContent = "新しい要素"; document.body.appendChild(newDiv);

4. イベントの処理

Documentオブジェクトは、ページのさまざまなイベント（例えば、クリックやキーボード入力）を管理するためのイベントリスナーを設定することもできます。

例

document.addEventListener("click", function() { alert("ページがクリックされました"); });

Documentオブジェクトと他のDOMオブジェクト

Documentオブジェクトは、DOMツリーのルートノードに相当します。ウェブページ内の全ての要素は、このDocumentからアクセスすることができます。各HTML要素はElementオブジェクトとして表され、Documentオブジェクトと連携して動的な操作が可能となります。

まとめ

Documentオブジェクトは、ウェブページの内容を操作するための基本的なインターフェースであり、DOMを通じて、JavaScriptがウェブページ内の要素を取得、変更、作成、削除、イベントを処理することを可能にします。これにより、インタラクティブで動的なウェブページの構築が実現できます。