Documentオブジェクト

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を表す
  • XMLドキュメント … <!DOCTYPE>がない場合はnull
  • HTMLドキュメント … つねにnull
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
※1 document.location | MDN What's the difference between window.location and document.location in JavaScript? - Stack Overflow
プロパティ - document - Web API インターフェイス | MDN

プロパティは、すべて読み取り専用です。

メソッド

メソッド (一部)
戻り値の型 メソッド名 説明
  addEventListener イベントハンドラ関数を追加する
  removeEventListener イベントハンドラ関数を削除する
DocumentFragment createDocumentFragment 空のDocumentFragmentを作成する
Element createElement 指定の要素名のElementノードを作成する
Element createElementNS 名前空間を指定して、指定の要素名のElementノードを作成する
  createTextNode 指定のテキストを表すTextノードを作成する
  getElementById 指定のid値を持つ、このドキュメントのElementノードを返す
  getElementsByTagName 指定のタグ名 (要素名) を持つ、このドキュメントのすべてのElementノードの配列を返す
Range createRange Rangeオブジェクトを生成する
メソッド - document - Web API インターフェイス | MDN

createElement

element = document.createElement( tagName );
document.createElement - Web API インターフェイス | MDN

tagNameの名前の要素を生成できます。要素によっては専用のメソッドを持つものもあり、たとえば

  • option要素 … new Option()
  • tr要素 … Table.insertRow()
  • td要素 … TableRow.insertCell()

などは、これらのメソッドでも生成できます。またコメントノードはこのcreateElement()では生成できず、それ専用のメソッドを用いる必要があります。

createTextNode

textNode = document.createTextNode( data );
document.createTextNode - Web API インターフェイス | MDN

dataの文字列をdataプロパティに持つ、Textオブジェクトを生成できます。

getElementById

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.getElementsByName( 'description' )とすると、<meta name="description" />が返されます。getElementById method (Internet Explorer) | MSDN

write

document.write( markup );
document.write - Web API インターフェイス | MDN

非同期で読み込まれる外部スクリプトからは、document.write()を実行できません。

document.write()の呼び出しに失敗した場合にも例外は発生せず、ブラウザによっては次のようにコンソールに出力されるだけです。

  • Firefox … 「非同期で読み込まれた外部スクリプトからの document.write() の呼び出しは無視されました。
  • Chrome … 「Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

セレクタAPI (Selector API)

CSSのセレクタと同じ構文で要素を取得できます。これらのメソッドは、Internet Explorer 8以降でサポートされます。

element = document.querySelector( selectors );
Document.querySelector() - Web APIs | MDN
elementList = document.querySelectorAll( selectors );
Document.querySelectorAll() - Web APIs | MDN