Document インターフェイス
Document インターフェイスとは、<HTML> 以下のエレメントオブジェクト群のルートになる Document オブジェクトを生成するインターフェイスです。
Document インターフェイスは Node インターフェイスを継承しています。 Node インターフェイスはEventTargetインターフェイスを継承していますので、DocumentオブジェクトはNodeとEventTargetのプロパティとメソッドを利用することができます。
- └─ DOM
- ├─ Event ... AnimationEvent、ClipboardEventなど
- └─ EventTarget
- └─ Node
- ├─ Document
- ├─ Element
- └ HTMLElement ... HTMLAnchorElement、HTMLParagraphElementなど
- └─ Attr
- └─ Node
Document インターフェイスから生成される Document オブジェクトは <html> が該当するように感じられるのですが、Document オブジェクト以下に <html> エレメントがあります。
DOM においては <html> の親として Document オブジェクトが存在します。Document オブジェクトにはページを構成するエレメント群とページ情報が集約されています。
<html>エレメントは Document オブジェクトに含まれており、document.documentElement プロパティによって取得できます。
オブジェクトのツリー構造
上記の Document インターフェイスの継承と、HTMLテキスト から DOM によってオブジェクトツリー化されたオブジェクト群の構成は別の形をしています。
ブラウザによってwebページが読み込まれると、インターフェイスと呼ばれる設計書に従ってページ内容がオブジェクト化されツリー構造が作成されます。
HTML テキストの内容を元にDocumentオブジェクトが生成されます。その下に <html>、 <head>、<body> が構成されます。
Documentオブジェクトと<html>は同一ではありません。都合上そのような仕様になっています。
ページ内 Index
コンストラクタ
コンストラクタによって任意にオブジェクトを生成することもできます。
var example_document = new Document();
プロパティ(Properties)
カレントのDocument オブジェクトは document
と記述します。
例えば、<head>エレメントを取得するには以下のようにします。
var elem_head = document.head;
| Property | 概要 | 分類 |
|---|---|---|
| .activeElement | 現在フォーカスのあるエレメント | Element |
| .body | <body>のオブジェクトハンドラー | <body> |
| .characterSet | ドキュメントの文字セット | Document 情報 |
| .childElementCount | 子エレメントの数 | Element |
| .children | 子エレメント | Element |
| .cookie | クッキーの取得と設定 | Cookie |
| .currentScript | 現在処理中の<script>エレメント | Script 情報 |
| .defaultView | 関連するWindowオブジェクト | Window |
| .designMode | Documentの編集可否の取得と設定 | WYSIWYG 機能 |
| .dir | テキストの書字方向、rtl/ltrの取得と設定 | 書式方向 |
| .doctype | 文書型宣言（DTD） | Document 情報 |
| .documentElement | Documentの直下の子エレメント。通常は<html> | <html> |
| .documentURI | DocumentのURL | URL |
| .embeds | <embed>のリスト HTMLCollection を取得 | <embed> |
| .firstElementChild | Documentの最初の子エレメント | Element |
| .fonts | fontに関するスタイル情報である FontFaceSet オブジェク卜の取得 | Document 情報 |
| .forms | <form> エレメントのリスト HTMLCollection の取得 | <form> |
| .fullscreenElement | 全画面モードで表示されているエレメントの取得 | <form> |
| .fullscreenEnabled | 全画面モードで表示できるか／否か | Document 情報 |
| .head | <head>エレメントの取得 | <head> |
| .hidden | ページが非表示か／否か | 表示／非表示 |
| .images | <img>のリスト HTMLCollection を取得 | <img> |
| .implementation | DTD（Document Type Definition：文書型宣言）の情報に関する DOMImplementation オブジェクトの取得 | Document 情報 |
| .lastModified | documentの最終更新日時 | Document 情報 |
| .lastStyleSheetSet | Documentの最後の子エレメントを取得 | Element |
| .links | ハイパーリンク <a> のリスト HTMLCollection の取得 | <a> |
| .location | DocumentのURL | URL |
| .pictureInPictureElement | ピクチャーインピクチャーモードのエレメントを取得 | ピクチャーインピクチャーモード |
| .pictureInPictureEnabled | ピクチャーインピクチャーモードが可能か／否か | ピクチャーインピクチャーモード |
| .plugins | 利用可能なプラグインのリストを HTMLCollection で取得 | プラグイン |
| .pointerLockElement | ポインターがロックされているか | Document 情報 |
| .readyState | ページの読み込み状況 | Document 情報 |
| .referrer | 現在のページの前のページ | Document 情報 |
| .featurePolicy | ブラウザの機能やAPIの使用の可否の設定 | Document 情報 |
| .scripts | スクリプト、 <script> エレメントのリストを HTMLCollection で取得 | <script> |
| .scrollingElement | スクロールが可能になっているエレメントを取得 | scroll機能あり |
| .styleSheets | スタイルシートのリスト、StyleSheetList を取得 | stylesheet |
| .timeline | タイムラインを DocumentTimeline インスタンスで取得 | Document 情報 |
| .title | <title>の値であるテキストの取得と設定 | <title> |
| .URL | DocumentのURLの取得 | URL |
| .visibilityState | Webページが閲覧可能な状態かを visible, hidden, prerender, unloaded のいずれかで返す | 表示／非表示 |
メソッド(Methods)
例えば、タグ名からエレメントリストを抽出する.getElementsByTagName()メソッドは以下のようにします。
var list_element = document.getElementsByTagName('p');
| Method | 概要 | 分類 |
|---|---|---|
| .adoptNode() | <iframe>内のエレメントの取り込み | |
| .append() | 最後の子エレメントの後ろに引数のエレメントを追加 | Element操作 |
| .caretPositionFromPoint() | キャレット（テキストの入力箇所を示すインジケーター）の場所を示す CaretPosition オブジェクト | |
| .close() | open() メソッドで書き込み用に開いたストリームを閉じる | Document編集 |
| .createAttribute() | 属性である Attr オブジェクトを新規生成 | Element操作 |
| .createAttributeNS() | XML。名前空間に属性を新規生成。 | XML |
| .createCDATASection() | XML。CDATAノードを生成 | XML |
| .createComment() | コメント Node を生成 | Element生成 |
| .createDocumentFragment() | 空の DocumentFragment オブジェクトを生成 | Element操作 |
| .createElement() | タグエレメントを新規生成 | Element生成 |
| .createElementNS() | XML。名前空間 URI と修飾名をもつエレメントを生成 | XML |
| .createExpression() | XML。DOMツリーの情報である XPathExpression を返す | XML |
| createEvent() | イベントオブジェクトを生成（非推奨） | |
| .createNodeIterator() | サブツリーに存在するノードリストに関するNodeIterator オブジェクトを生成 | |
| .createNSResolver() | XML。 XPathNSResolver オブジェクトを生成 | |
| .createProcessingInstruction() | XML。処理命令に関するProcessingInstruction オブジェクトを生成 | |
| .createRange() | 空の Range オブジェクトを生成 | |
| .createTextNode() | Text ノードを生成。テキストオブジェクトと結合 | Text生成 |
| .createTreeWalker() | TreeWalker オブジェクトの生成 | |
| .elementFromPoint() | 指定座標の最も親になるエレメントを返す | |
| .elementsFromPoint() | 指定座標のエレメントを配列で返す | |
| .exitPictureInPicture() | ピクチャーインピクチャーウィンドウの動画を元のコンテナに戻す | |
| .exitPointerLock() | ポインターのロックを解除 | |
| .evaluate() | XML。引数の XPath 式やパラメータから XPathResult を返す | XML |
| .getAnimations() | 現在実行中の Animation オブジェクトの配列を返す | |
| .getBoxQuads() | CSS フラグメントに関する DOMQuad オブジェクトを返す | |
| .getElementById() | 指定した id 名をもつエレメントを返す | Element取得 |
| .getElementsByClassName() | 指定した class 名をもつエレメントのリスト、 HTMLCollection を返す | Element取得 |
| .getElementsByName() | 指定した name 名をもつエレメントリスト、NodeList を返す | Element取得 |
| .getElementsByTagName() | 指定したタグエレメントのリスト、 HTMLCollection を返す | Element取得 |
| .getElementsByTagNameNS() | XML。指定した名前空間をもつエレメントのリスト、 NodeList を返す | XML、Element取得 |
| .getSelection() | ユーザーが選択中のテキストとキャレット（入力ポイント）を返す | |
| .hasFocus() | フォーカスされているかを真偽値で返す | |
| .hasStorageAccess() | ストレージへのアクセスが可能か／否かを Promise で返す | |
| .importNode() | <iframe>内のエレメントの複製して取り込み | |
| .open() | 書き込み用にストリームを開く | Document編集 |
| .prepend() | 最初の子エレメントの前に引数のエレメントを挿入 | |
| .querySelector() | 指定したセレクターをもつ最初のエレメントを返す | Element取得 |
| .querySelectorAll() | 指定したセレクターをもつエレメントのリスト、NodeListを返す | Element取得 |
| .replaceChildren() | 子エレメントを引数のNodeまたはDOMStringに置き換える | |
| .requestStorageAccess() | ストレージへのアクセスを許可／不可を返す。不可の場合は Promise を返す | |
| .write() | open() メソッドで開いたストリームに書き込む | Document編集 |
| .writeln() | open() メソッドで開いたストリームに書き込む。改行を含む | Document編集 |
イベントハンドラー(Event Handlers)
イベントハンドラーとイベントタイプの一覧です。
Documentへの設定が対象となるイベントハンドラーです。定義方法には以下があります。
document.addEventListener( 'click', ()=>{...} )
document.onload = function(){...}
イベントハンドラーとは、onイベント名の属性です。この属性が設定されることで Documentでイベントを捉えたら定義された関数や関数式を実行します。
Document のイベントハンドラーは GlobalEventHandlers ミックスインを継承しています。
以下は GlobalEventHandlers ミックスインのイベント名一覧です。
| タイプ名（ハンドラー名） | 概要 | 分類 |
|---|
詳しくは、 GlobalEventHandlers ミックスインを参照してください。
以下はその他 Window インターフェイスで利用できるイベントタイプ名の一覧です。実験的もしくは古いために使用は推奨できません（クリップボードイベントは利用できるようです）。イベントハンドラーはこのタイプ名にon
が付いた名称です。
| タイプ名 | 概要 | 分類 |
|---|---|---|
| copy | ユーザーがコピー操作をしたら。詳しくは ClipboardEvent を参照 | クリップボード |
| cut | ユーザーが切り取り操作をしたら。詳しくは ClipboardEvent を参照 | クリップボード |
| DOMContentLoaded | イベントのみ。ページが読み込まれ、スタイルシート、画像、サブフレームは読み込まれる前 | |
| fullscreenchange | 全画面モードが開始または終了したとき | |
| fullscreenerror | 全画面モードが開始できないエラーが発生したら | |
| paste | ユーザーが貼り付け操作をしたら。詳しくは ClipboardEvent を参照 | クリップボード |
| readystatechange | documentの readyState 属性に変化があったら | |
| visibilitychange | webページが表示または非表示になったら |