JS DOM (ドキュメント オブジェクト モデル)

ドキュメント オブジェクト モデル (略して DOM) は、HTML または XML ドキュメントを表すために使用される、プラットフォームおよび言語に依存しないモデルです。ドキュメント オブジェクト モデルは、ドキュメントの論理構造と、プログラムがドキュメントにアクセスして操作する方法を定義します。

 

Web ページが読み込まれると、ブラウザーは現在のページのドキュメント オブジェクト モデル (DOM) を自動的に作成します。 DOM では、ドキュメントのすべての部分 (要素、属性、テキストなど) が論理的なツリー構造 (家系図に似ています) に編成され、ツリーの各枝の終わりはノードと呼ばれ、以下に示すように、各ノードはオブジェクトです。

DOM の助けを借りて、JavaScript を使用して、HTML ドキュメント内のあらゆるものにアクセス、変更、削除、または追加できます。

ドキュメント オブジェクト

ブラウザーが HTML ドキュメントをロードすると、DOM ツリー内のすべてのノードのルート ノードである Document オブジェクトが作成されます。 Document オブジェクトを介して、HTML ドキュメント内のすべての要素にアクセスできます。

ヒント: Document オブジェクトは Window オブジェクトの一部であるため、window.document から Document オブジェクトにアクセスできます。

Document オブジェクトのプロパティ

Document オブジェクトで提供されるプロパティとその説明を次の表に示します。

属性	説明
document.activeElement	現在フォーカスされている要素を返します
document.anchors	ドキュメント内のすべての Anchor オブジェクトへの参照を返します
document.applets	ドキュメント内のすべての Applet オブジェクトへの参照を返します。注: HTML5 は <applet> 要素をサポートしなくなりました
document.baseURI	ドキュメントのベース URI を返します
document.body	ドキュメントの body 要素を返します
document.cookie	現在のドキュメントに関連付けられているすべての Cookie を設定または返す
document.doctype	ドキュメントに関連付けられたドキュメント タイプ宣言 (DTD) を返します。
document.documentElement	ドキュメントのルート ノードを返します
document.documentMode	ブラウザがドキュメントをレンダリングするモードを返します
document.documentURI	ドキュメントの場所を設定または返す
document.domain	現在のドキュメントのドメイン名を返します
document.domConfig	非推奨。normalizeDocument() が呼び出されたときに使用された構成を返します
document.embeds	ドキュメント内のすべての埋め込みコンテンツ (embed) のコレクションを返します
document.forms	ドキュメント内のすべての Form オブジェクトへの参照を返します
document.images	ドキュメント内のすべての Image オブジェクトへの参照を返します
document.implementation	このドキュメントを処理する DOMImplementation オブジェクトを返します
document.inputEncoding	ドキュメントのエンコーディングを返します
document.lastModified	ドキュメントの最終更新日を返します
document.links	ドキュメント内のすべての Area および Link オブジェクトへの参照を返します
document.readyState	返却書類の状態（読み込み中）
document.referrer	現在のドキュメントをロードするための URL を返します
document.scripts	ページ内のすべてのスクリプトのコレクションを返します
document.strictErrorChecking	エラーチェックが強制されるかどうかを設定または返します
document.title	現在のドキュメントのタイトルを返します
document.URL	ドキュメントの完全な URL を返します

Document オブジェクトで提供されるメソッドとその説明を次の表に示します。

方法	説明
document.addEventListener()	ドキュメントにイベントを追加する
document.adoptNode(node)	別のドキュメントから現在のドキュメントに適応したノードを返します
document.close()	document.open() メソッドで開いた出力ストリームを閉じ、選択したデータを表示します
document.createAttribute()	指定されたラベルの属性ノードを追加します
document.createComment()	コメント ノードを作成する
document.createDocumentFragment()	空の DocumentFragment オブジェクトを作成し、このオブジェクトを返します
document.createElement()	要素ノードを作成する
document.createTextNode()	テキスト ノードを作成する
document.getElementsByClassName()	指定されたクラス名を持つドキュメント内のすべての要素のコレクションを返します
document.getElementById()	指定された id 属性を持つドキュメント内の要素を返します
document.getElementsByName()	指定された名前属性を持つオブジェクトのコレクションを返します
document.getElementsByTagName()	指定されたタグ名を持つオブジェクトのコレクションを返します
document.importNode()	別のドキュメントからこのドキュメントにノードをコピーして適用します
document.normalize()	空のテキスト ノードを削除し、隣接するテキスト ノードを結合する
document.normalizeDocument()	空のテキスト ノードを削除し、隣接するノードを結合する
document.open()	document.write() または document.writeln() メソッドからの出力を収集するためにストリームを開きます
document.querySelector()	指定された CSS セレクターを持つドキュメント内の最初の要素を返します
document.querySelectorAll()	指定された CSS セレクターを持つドキュメント内のすべての要素を返します
document.removeEventListener()	ドキュメントからイベント ハンドラを削除する
document.renameNode()	要素または属性ノードの名前を変更する
document.write()	書類に何かを書く
document.writeln()	writeln() メソッドが最後に改行を出力することを除いて、write() メソッドと同等です。

サンプルコードは次のとおりです。

 document.addEventListener("click", function(){
    document.body.innerHTML = document.activeElement;
    var box = document.createElement('div');
    document.body.appendChild(box);
    var att = document.createAttribute('id');
    att.value = "myDiv";
    document.getElementsByTagName('div')[0].setAttributeNode(att);
    document.getElementById("myDiv").innerHTML = Math.random();
    var btn = document.createElement("button");
    var t = document.createTextNode("ボタン");
    btn.appendChild(t);
    document.body.appendChild(btn);
    var att = document.createAttribute('onclick');
    att.value = "myfunction()";
    document.getElementsByTagName('button')[0].setAttributeNode(att);
});
function myfunction(){
    alert(document.title);
} 

上記のコードを実行し、ページの空白領域をクリックして、下の図に示すようにコンテンツを出力します。