ホーム プログラミング言語 Web関連 javascript JS DOM (ドキュメント オブジェクト モデル)

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


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

 

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

図 1: DOM ツリー
図 1: 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 オブジェクトで提供されるメソッドとその説明を次の表に示します。

方法 説明
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);
} 

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

図: ドキュメント オブジェクトのデモ
図: ドキュメント オブジェクトのデモ
 

「JS DOM (ドキュメント オブジェクト モデル)」についてわかりやすく解説!絶対に観るべきベスト2動画

JavaScript DOM活用:DOM(Document Object Model)とは|lynda.com 日本版
JavaScript DOM操作 – 初心者向けフルコース