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を返します。
cookie
クッキーを返します。
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
ドキュメントの最終更新日時を返します。
links
ドキュメントの全てのハイパーリンク(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
ドキュメントの準備状況が変化した時に発火します。
サポート状況
クリックすると、バージョンごとの対応状況を確認できます。
Features | Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|---|
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() | ● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- IDLリファレンス
- WHATWGやW3Cで定義されているDOMなどのWeb APIの仕様を、サンプルコードやデモ付きでまとめています。
- HTMLElement
- HTMLElementは、全てのHTML要素が共通して実装しているインターフェイスです。全てのHTML要素は、これと同じインターフェイスか、または、これに独自のプロパティやメソッドを追加したインターフェイスを持っています。
- 配列から要素を削除する
- 配列から先頭、末尾、または指定位置の要素を削除します。
- 要素の位置座標を取得する
- 指定した要素の位置座標を取得します。