SYNCERのロゴ
アイキャッチ画像

Document - ドキュメント

Documentは、ドキュメントを管理するための機能を備えたインターフェイスです。

概要

名前
Document
継承
  • Node
  • Document
実装
DocumentAndElementEventHandlers
DocumentOrShadowRoot
GlobalEventHandlers
NonElementParentNode
ParentNode
IDL
[Constructor,
 Exposed=Window]
interface Document : Node {
  [SameObject] readonly attribute DOMImplementation implementation;
  readonly attribute USVString URL;
  readonly attribute USVString documentURI;
  readonly attribute USVString origin;
  readonly attribute DOMString compatMode;
  readonly attribute DOMString characterSet;
  readonly attribute DOMString charset; // historical alias of .characterSet
  readonly attribute DOMString inputEncoding; // historical alias of .characterSet
  readonly attribute DOMString contentType;

  readonly attribute DocumentType? doctype;
  readonly attribute Element? documentElement;
  HTMLCollection getElementsByTagName(DOMString qualifiedName);
  HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  HTMLCollection getElementsByClassName(DOMString classNames);

  [NewObject] Element createElement(DOMString localName, optional ElementCreationOptions options);
  [NewObject] Element createElementNS(DOMString? namespace, DOMString qualifiedName, optional ElementCreationOptions options);
  [NewObject] DocumentFragment createDocumentFragment();
  [NewObject] Text createTextNode(DOMString data);
  [NewObject] CDATASection createCDATASection(DOMString data);
  [NewObject] Comment createComment(DOMString data);
  [NewObject] ProcessingInstruction createProcessingInstruction(DOMString target, DOMString data);

  [CEReactions, NewObject] Node importNode(Node node, optional boolean deep = false);
  [CEReactions] Node adoptNode(Node node);

  [NewObject] Attr createAttribute(DOMString localName);
  [NewObject] Attr createAttributeNS(DOMString? namespace, DOMString qualifiedName);

  [NewObject] Event createEvent(DOMString interface);

  [NewObject] Range createRange();

  // NodeFilter.SHOW_ALL = 0xFFFFFFFF
  [NewObject] NodeIterator createNodeIterator(Node root, optional unsigned long whatToShow = 0xFFFFFFFF, optional NodeFilter? filter = null);
  [NewObject] TreeWalker createTreeWalker(Node root, optional unsigned long whatToShow = 0xFFFFFFFF, optional NodeFilter? filter = null);
};

dictionary ElementCreationOptions {
  DOMString is;
};
// CSS Object Model
partial interface Document {
  [SameObject] readonly attribute StyleSheetList styleSheets;
};
// Pointer Lock
partial interface Document {
    attribute EventHandler onpointerlockchange;
    attribute EventHandler onpointerlockerror;
    void exitPointerLock();
};

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
// Fullscreen API
partial interface Document {
  [LenientSetter] readonly attribute boolean fullscreenEnabled;
  [LenientSetter, Unscopable] readonly attribute boolean fullscreen; // historical

  Promise<void> exitFullscreen();

  attribute EventHandler onfullscreenchange;
  attribute EventHandler onfullscreenerror;
};

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
// CSSOM View Module
partial interface Document {
  Element? elementFromPoint(double x, double y);
  sequence<Element> elementsFromPoint(double x, double y);
  CaretPosition? caretPositionFromPoint(double x, double y);
  readonly attribute Element? scrollingElement;
};
// extends significantly
[OverrideBuiltins]
partial interface Document {
  // resource metadata management
  [PutForwards=href, Unforgeable] readonly attribute Location? location;
  attribute USVString domain;
  readonly attribute USVString referrer;
  attribute USVString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
  [CEReactions] attribute DOMString title;
  [CEReactions] attribute DOMString dir;
  [CEReactions] attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  [SameObject] readonly attribute HTMLCollection images;
  [SameObject] readonly attribute HTMLCollection embeds;
  [SameObject] readonly attribute HTMLCollection plugins;
  [SameObject] readonly attribute HTMLCollection links;
  [SameObject] readonly attribute HTMLCollection forms;
  [SameObject] readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);
  readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only

  // dynamic markup insertion
  [CEReactions] Document open(optional DOMString type = "text/html", optional DOMString replace = "");
  WindowProxy open(USVString url, DOMString name, DOMString features);
  [CEReactions] void close();
  [CEReactions] void write(DOMString... text);
  [CEReactions] void writeln(DOMString... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  readonly attribute Element? activeElement;
  boolean hasFocus();
  [CEReactions] attribute DOMString designMode;
  [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = "");
  boolean queryCommandEnabled(DOMString commandId);
  boolean queryCommandIndeterm(DOMString commandId);
  boolean queryCommandState(DOMString commandId);
  boolean queryCommandSupported(DOMString commandId);
  DOMString queryCommandValue(DOMString commandId);

  // special event handler IDL attributes that only apply to Document objects
  [LenientThis] attribute EventHandler onreadystatechange;
};
Document implements GlobalEventHandlers;
Document implements DocumentAndElementEventHandlers;

enum DocumentReadyState { "loading", "interactive", "complete" };

typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

typedef EventHandlerNonNull? EventHandler;

callback EventHandlerNonNull = any (Event event);
// Selection API
partial interface Document {
    Selection? getSelection();
};
// Page Visibility
partial interface Document {
  readonly attribute boolean hidden;
  readonly attribute VisibilityState visibilityState; 
};

enum VisibilityState { "hidden", "visible", "prerender", "unloaded" };
仕様書
https://dom.spec.whatwg.org/#interface-document
https://drafts.csswg.org/cssom/#extensions-to-the-document-interface (CSS Object Model)
https://w3c.github.io/pointerlock/#extensions-to-the-document-interface (Pointer Lock)
https://fullscreen.spec.whatwg.org/#api (Fullscreen API)
https://drafts.csswg.org/cssom-view/#extensions-to-the-document-interface (CSSOM View Module)
https://html.spec.whatwg.org/multipage/dom.html#document (extends significantly)
http://w3c.github.io/selection-api/#extensions-to-document-interface (Selection API)
https://www.w3.org/TR/page-visibility/#dom-document-visibilitystate (Page Visibility)

チュートリアル

Documentは、Window.documentが返します。

window.document ;
document ;	// windowは省略可

window.document.body ;
document.body ;

Documentを作成するには、DOMImplementation、またはコンストラクタを利用します。

var newDocument = new Document() ;
var newDocument = document.implementation.createHTMLDocument() ;

コンストラクタ

Document()

新しいDocumentのオブジェクトを作成します。

プロパティ

URL

ドキュメントに関連付けられたURLアドレスを返します。

activeElement

フォーカス中の要素を返します。

body

ドキュメントのbody要素を返します。

characterSet

ドキュメントの文字エンコーディングを返します。

【非推奨】charset

ドキュメントの文字エンコーディングを返します。

compatMode

ブラウザのレンダリングモード名を返します。

contentType

ドキュメントのmime typeを返します。

クッキーを返します。

currentScript

現在、処理を実行しているscript要素を返します。

defaultView

ドキュメントに関連付けられているWindowを返します。

designMode

ドキュメントの編集モードを表す文字列を返します。

dir

ドキュメントの文字の方向を返します。html要素のdir属性を反映しています。

doctype

ドキュメントの文書型宣言(DocumentType)を返します。

documentElement

ドキュメントのルート(最上位)の要素(html要素)を返します。

documentURI

ドキュメントに関連付けられたURIを返します。

domain

ドキュメントに関連付けられたドメインを返します。

embeds

ドキュメントの全てのembed要素を返します。

forms

ドキュメントの全てのform要素を返します。

【非推奨】fullscreen

ドキュメントが、フルスクリーン表示中か否かを返します。

fullscreenEnabled

ドキュメントが、フルスクリーン表示が可能か否かを返します。

head

ドキュメントのhead要素を返します。

hidden

ドキュメントが非表示状態と見做されているか否かを返します。

images

ドキュメントの全てのimg要素を返します。

implementation

ドキュメントを作成する機能を備えたDOMImplementationを返します。

【非推奨】inputEncoding

ドキュメントの文字エンコーディングを返します。

lastModified

ドキュメントの最終更新日時を返します。

ドキュメントの全てのハイパーリンク(a要素area要素)を返します。

location

ドキュメントのロケーション(Location)を返します。

origin

ドキュメントに関連付けられたオリジンを返します。

plugins

ドキュメントの全てのembed要素を返します。このプロパティは、embedsと同じように働きます。

readyState

ドキュメントの読み込み状況を表す文字列を返します。

referrer

ドキュメントに関連付けられているリファラーを返します。

scripts

ドキュメントの全てのscript要素を返します。

scrollingElement

ドキュメントの、スクロール対象の要素を返します。

styleSheets

ドキュメントの全てのスタイルシートをStyleSheetListで返します。

title

ドキュメントのタイトルを返します。title要素の中身を反映しています。

visibilityState

ドキュメントの表示状態を文字列で返します。

メソッド

adoptNode()

外部のドキュメントから自身のドキュメントにノードを移動します。元のノードはなくなります。

caretPositionFromPoint()

指定した座標から最も近い、適切なキャレットの位置を返します。

close()

ドキュメントを閉じて、関連メソッドで書き込みができない状態にします。

createAttribute()

属性ノード(Node)を新しく作成します。

createAttributeNS()

名前空間を持つ属性ノード(Attr)を新しく作成します。

createCDATASection()

CDATAセクション(CDATASection)を新しく作成します。

createComment()

コメントノード(Comment)を新しく作成します。

createDocumentFragment()

DocumentFragmentを新しく作成します。

createElement()

タグ名を指定して、要素を新しく作成します。

createElementNS()

名前空間を持つ要素を作成します。

createEvent()

イベント(Event)を新しく作成します。

createNodeIterator()

NodeIteratorを新しく作成します。

createProcessingInstruction()

処理命令ノード(ProcessingInstruction)を新しく作成します。

createRange()

Rangeを新しく作成します。

createTextNode()

テキストノード(Text)を新しく作成します。

createTreeWalker()

TreeWalkerを新しく作成します。

elementFromPoint()

指定した座標にある要素を1つだけ取得します。

elementsFromPoint()

指定した座標にある全ての要素を配列で返します。

execCommand()

編集コマンドを実行します。

exitFullscreen()

フルスクリーンを解除します。

exitPointerLock()

ポインターロックを解除します。

getElementsByClassName()

class属性を指定して要素を取得します。

getElementsByName()

name属性を指定してノードを取得します。

getElementsByTagName()

タグ名を指定して要素を取得します。

getElementsByTagNameNS()

タグ名と名前空間を指定して要素を取得します。

getSelection()

選択中のテキストを表すSelectionを返します。

hasFocus()

ドキュメントがフォーカスされているか否かを返します。

importNode()

外部のドキュメントから自身のドキュメントにノードを複製します。元のノードはなくなりません。

open()

ドキュメントを開き、関連メソッドで書き込みができる状態にします。

queryCommandEnabled()

編集コマンドを実行できる状態か否か確認します。

queryCommandIndeterm()

編集コマンドが不確定か否か確認します。

queryCommandState()

編集コマンドを実行したか否かを確認します。

queryCommandSupported()

編集コマンドをサポートしているか否か確認します。

queryCommandValue()

編集コマンドの実行結果の値を返します。

write()

open()で開かれている状態のドキュメントに、追加でHTMLを書き込みます。

writeln()

open()で開かれている状態のドキュメントに、追加でHTMLを書き込みます。

定数

固有の定数はありません。

イベント

onfullscreenchange

フルスクリーンの状態が変化した時に発火します。

onfullscreenerror

フルスクリーンでエラーが起きた時に発火します。

onpointerlockchange

ポインターロックの状態が変化した時に発火します。

onpointerlockerror

ポインターロックでエラーが起きた時に発火します。

onreadystatechange

ドキュメントの準備状況が変化した時に発火します。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
Document確認中確認中確認中確認中確認中確認中確認中確認中
activeElement
adoptNode() 9+
body
caretPositionFromPoint()× 20+××××××
characterSet 9+
charset 44+ 9+
close()
compatMode
contentType 36+ 9.1+×× 23+ 9.1+×
cookie
createAttribute()
createAttributeNS() 35+ 9+ 22+
createCDATASection() 9+
createComment()
createDocumentFragment()
createElement()
createElementNS() 9+
createEvent() 9+
createNodeIterator() 9+
createProcessingInstruction() 9+
createRange() 9+
createTextNode()
createTreeWalker() 9+
currentScript 29+ 7.1+× 16+ 8.3+ 4.4+
defaultView 9+
designMode 9+
dir
doctype
Document() 60+ 20+ 7.1+×× 47+ 8.3+×
documentElement
documentURI××
domain
elementFromPoint() 9+
elementsFromPoint() 43+ 46+× 10+ 30+××
embeds
execCommand()
exitFullscreen() 15+ 9+ 5.1+ 11+ 15+× 4.4+
exitPointerLock()確認中確認中確認中確認中確認中確認中確認中確認中
forms
fullscreen確認中確認中確認中確認中確認中確認中確認中確認中
fullscreenEnabled確認中確認中確認中確認中確認中確認中確認中確認中
getElementsByClassName() 9+
getElementsByName()
getElementsByTagName()
getElementsByTagNameNS() 9+
getSelection() 9+
hasFocus() 15+
head 5.1+ 9+
hidden 33+ 18+ 7.1+ 10+ 20+ 7.0+ 4.4+
images
implementation
importNode() 9+
inputEncoding 9+ 15+
lastModified
links
location
onfullscreenchange確認中確認中確認中確認中確認中確認中確認中確認中
onfullscreenerror 18+ 10+ 6.0+ 11+ 19+× 4.4+
onpointerlockchange確認中確認中確認中確認中確認中確認中確認中確認中
onpointerlockerror確認中確認中確認中確認中確認中確認中確認中確認中
onreadystatechange 9+ 5.1+ 11.6+ 4.0+
open()
origin 41+確認中 7.1+×× 28+ 8.3+×
plugins
queryCommandEnabled()
queryCommandIndeterm() 15+
queryCommandState()
queryCommandSupported()
queryCommandValue()
readyState
referrer
scripts 9+
scrollingElement 44+ 48+ 9.1+× 31+ 9.1+×
styleSheets
title
URL
visibilityState 33+ 18+ 7.1+ 10+ 20+ 7.0+ 4.4+
write()
writeln()
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月5日 (木)
コンテンツを公開しました。