備忘録的プログラミングリファレンス

Document インターフェイス

 Document インターフェイスとは、<HTML> 以下のエレメントオブジェクト群のルートになる Document オブジェクトを生成するインターフェイスです。

 Document インターフェイスは Node インターフェイスを継承しています。 Node インターフェイスEventTargetインターフェイスを継承していますので、DocumentオブジェクトはNodeEventTargetのプロパティとメソッドを利用することができます。

Document インターフェイス継承図

 Document インターフェイスから生成される Document オブジェクトは <html> が該当するように感じられるのですが、Document オブジェクト以下に <html> エレメントがあります。
 DOM においては <html> の親として Document オブジェクトが存在します。Document オブジェクトにはページを構成するエレメント群とページ情報が集約されています。

 <html>エレメントは Document オブジェクトに含まれており、document.documentElement プロパティによって取得できます。

オブジェクトのツリー構造

 上記の Document インターフェイスの継承と、HTMLテキスト から DOM によってオブジェクトツリー化されたオブジェクト群の構成は別の形をしています。

Document オブジェクト
  • Window
  • └─ Document
    • └─ <html>
      • ├─ <head>
        • └─ <tite>、<meta>、<link>...
      • └─ <body>
        • └─ <article>、<header>、<main>...

 ブラウザによってwebページが読み込まれると、インターフェイスと呼ばれる設計書に従ってページ内容がオブジェクト化されツリー構造が作成されます。 HTML テキストの内容を元にDocumentオブジェクトが生成されます。その下に <html>、 <head>、<body> が構成されます。
 Documentオブジェクトと<html>は同一ではありません。都合上そのような仕様になっています。

ページ内 Index

コンストラクタ

 コンストラクタによって任意にオブジェクトを生成することもできます。

Documentコンストラクタ(Documentオブジェクトの生成)
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
.designModeDocumentの編集可否の取得と設定 WYSIWYG 機能
.dirテキストの書字方向、rtl/ltrの取得と設定書式方向
.doctype文書型宣言(DTD) Document 情報
.documentElementDocumentの直下の子エレメント。通常は<html><html>
.documentURIDocumentのURL URL
.embeds<embed>のリスト HTMLCollection を取得 <embed>
.firstElementChildDocumentの最初の子エレメント Element
.fontsfontに関するスタイル情報である FontFaceSet オブジェク卜の取得 Document 情報
.forms<form> エレメントのリスト HTMLCollection の取得 <form>
.fullscreenElement全画面モードで表示されているエレメントの取得 <form>
.fullscreenEnabled全画面モードで表示できるか/否か Document 情報
.head<head>エレメントの取得 <head>
.hiddenページが非表示か/否か表示/非表示
.images<img>のリスト HTMLCollection を取得 <img>
.implementationDTD(Document Type Definition:文書型宣言)の情報に関する DOMImplementation オブジェクトの取得 Document 情報
.lastModifieddocumentの最終更新日時 Document 情報
.lastStyleSheetSetDocumentの最後の子エレメントを取得 Element
.linksハイパーリンク <a> のリスト HTMLCollection の取得 <a>
.locationDocumentの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> 
.URLDocumentのURLの取得 URL
.visibilityStateWebページが閲覧可能な状態かを 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 を参照クリップボード
readystatechangedocumentの readyState 属性に変化があったら
visibilitychangewebページが表示または非表示になったら