Documentオブジェクトは、XMLまたはHTMLのドキュメントを表します。
| 戻り値の型 | プロパティ名 | 説明 | 適用 |
|---|---|---|---|
| activeElement | 現在フォーカスのある要素 | ||
| n/a | async | DOM 3 | |
| String | characterSet | ドキュメントの文字セット | DOM 0 |
| String | compatMode | ドキュメントのレンダリングモード | HTML、XHTML |
| Element | currentScript | スクリプトを処理しているscript要素 | HTML、XUL |
| Window | defaultView | ドキュメントを表示するWebブラウザのWindow | DOM 2 View |
| DocumentType | doctype | ドキュメントのDTDを表す
|
DOM 2 Core |
| Element | documentElement | ドキュメントのルート要素。HTMLドキュメントではhtml要素 | すべて |
| HTMLBodyElement | body | ドキュメントのbody要素 | HTML |
| DOMImplementation | implementation | ドキュメントを作成した実装を表す | DOM 2 Core |
| String | inputEncoding | ドキュメントのパース時のエンコーディング (非推奨) | DOM 3 |
| String | lastModified | ドキュメントの最終更新日 | DOM 0 |
| Location | location | ドキュメントのURL
Window.locationと同一のLocationオブジェクトへアクセスできるが、クロスブラウザの観点からWindow.locationを使用すべき。※1 |
|
| String | readyState | ドキュメントの読み込み状況 | HTML5 |
| String | referrer | ドキュメントのリファラ document.referrer - Web API インターフェイス | MDN | HTML |
| CSSStyleSheet[] | styleSheets | ドキュメントに埋め込まれるか、リンクされたスタイルシート オブジェクトの配列
HTMLドキュメントでは埋め込みはstyle要素、リンクはlink要素で定義されたスタイルシートが該当する。配列要素の順は、ドキュメントで定義された順と同じ。 代替スタイルシートをサポートしないブラウザでは、それはこのプロパティに含まれない。 |
DOM 2 Style |
| String | title | ドキュメントのタイトル | HTML |
| String | URL | document.location.hrefの代替 | HTML |
プロパティは、すべて読み取り専用です。
| 戻り値の型 | メソッド名 | 説明 |
|---|---|---|
| DocumentFragment | createDocumentFragment | 空のDocumentFragmentを作成する |
| Element | createElement | 指定の要素名のElementノードを作成する |
| Element | createElementNS | 名前空間を指定して、指定の要素名のElementノードを作成する |
| Text | createTextNode | 指定のテキストを表すTextノードを作成する |
| Element | getElementById | 指定のid値を持つ、このドキュメントのElementノードを返す |
| HTMLCollection | getElementsByTagName | 指定のタグ名 (要素名) を持つ、このドキュメントのすべてのElementノードの配列を返す |
| Range | createRange | Rangeオブジェクトを生成する |
| Boolean | execCommand | 編集可能なドキュメントでコマンドを実行する |
element = document.createElement( tagName );document.createElement - Web API インターフェイス | MDN
tagNameの名前の要素を生成できます。要素によっては専用のメソッドを持つものもあり、たとえば
などは、これらのメソッドでも生成できます。またコメントノードはこのcreateElement()では生成できず、それ専用のメソッドを用いる必要があります。
textNode = document.createTextNode( data );document.createTextNode - Web API インターフェイス | MDN
dataの文字列をdataプロパティに持つ、Textオブジェクトを生成できます。
element = document.getElementById( id );document.getElementById - Web API リファレンス | MDN
id属性がidであるノードを取得できます。id属性の大文字/小文字は区別されます。
ブラウザによってはid属性の値でグローバル変数として宣言されるため、この関数を用いなくともノードへアクセスできる場合があります。たとえば<div id="foo">のノードは変数fooでアクセス可能ですが、非標準の方法のため使用すべきではありません。
javascript - Do DOM tree elements with ids become global variables? - Stack Overflow
javascript - Is there a spec that the id of elements should be made global variable? - Stack Overflow
IE8より前ではname属性も対象となっています。このため、たとえばdocument.getElementById( 'description' )とすると、<meta name="description" />が返されます。getElementById method (Internet Explorer) | MSDN
bool = document.execCommand( aCommandName, aShowDefaultUI, aValueArgument )document.execCommand - Web API インターフェイス | MDN
コマンドがサポートされないか無効な場合には、falseが返されます。
document.write( markup );document.write - Web API インターフェイス | MDN
document.open()で開かれたストリームに文字列を書き込めます。インラインのHTMLでは、その位置に書き込まれます。
非同期で読み込まれる外部スクリプトからは、document.write()を実行できません。よってスクリプトを実行している場所にHTML要素を追加する方法で、Textオブジェクトを追加します。
書き込んだ内容に問題があると、それ以降の出力が失われることがあります。Speculative parsing (投機的解析) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN
document.write()の呼び出しに失敗した場合にも例外は発生せず、ブラウザによっては次のようにコンソールに出力されるだけです。
CSSのセレクタと同じ構文で要素を取得できます。これらのメソッドは、Internet Explorer 8以降でサポートされます。
element = document.querySelector( selectors );Document.querySelector() - Web APIs | MDN
elementList = document.querySelectorAll( selectors );Document.querySelectorAll() - Web APIs | MDN