ドキュメントについて（HTMLDocument）

・	ドキュメントについて
・	ドキュメントのプロパティについて
・	現在のページのドメインを取得する
・	現在のページの URL アドレスを取得する
・	現在のページの読み込み状況を取得する
・	現在のページの最終更新日時を取得する
・	現在のページのタイトルを取得する
・	リファラ情報を取得する
・	ドキュメントのサイズについて
・	ドキュメントの互換モードについて

前のページに戻る

ドキュメントについて

■Document インターフェースについて

Document インターフェースは、文書全体を管理するための機能がまとめられています。

ドキュメントは、DOM ノード全体のルート（最上位）部分に相当します。

■HTMLDocument について

HTML 文書の場合、HTMLDocument インターフェースとなります。

DOM に関する機能については、こちらで解説しています。

このページでは、それ以外の機能について解説しています。

■ HTMLDocument インターフェースの派生について

HTMLDocument インターフェースは、以下の様に派生しています。

ここで解説してない分は、リンク先に解説がありますので合わせてご覧下さい。

Object

↓派生

EventTarget

↓派生

Node

↓派生

Document

↓派生

HTMLDocument

■ドキュメントオブジェクトを取得する

window.document プロパティを使用します。

「XML 文書」であれば、Document オブジェクトが得られます。

「HTML 文書」であれば、HTMLDocument オブジェクトが得られます。

HTMLDocument オブジェクトを取得する


<html>
  <body>

    <script type="text/javascript">
    <!--

	// HTMLDocument オブジェクトを取得する
	var document_obj = window.document;

	// 出力テスト
	console.log(document_obj);

    //-->
    </script>

  </body>
</html>

上に戻る

ドキュメントのプロパティについて

■ドキュメントのプロパティ一覧

HTMLDocument インターフェースで利用可能な、プロパティの一覧です。（一部抜粋）

■ Document インターフェース

プロパティ名	型	説明
doctype	DocumentType	文書型定義（DTD）を取得する（読み取り専用）
implementation	DOMImplementation	DOMImplementation オブジェクトを取得する（読み取り専用）
documentElement	Element	ルートに相当するエレメントを取得する（読み取り専用）

■ HTMLDocument インターフェース

プロパティ名	型	説明
location	Location	ロケーションオブジェクトを取得する（読み取り専用）
domain	String	現在のページのドメインを取得する（オリジンを変更する）
URL	String	現在のページの URL アドレスを取得する（読み取り専用）
readyState	String	現在のページの読み込み状況を取得する（読み取り専用）
lastModified	String	現在のページの最終更新日時を取得する（読み取り専用）
title	String	現在のページのタイトルを設定する
referrer	String	リファラ情報を取得する（読み取り専用）
cookie	String	Cookie を設定する
compatMode	String	互換モードを取得する（読み取り専用）
characterSet	String	文字セットを取得する（読み取り専用）
head	HTMLHeadElement	HTMLHeadElement を取得する（読み取り専用）
body	HTMLBodyElement	HTMLBodyElement を取得する
images	HTMLCollection	HTMLImageElement をまとめて取得する（読み取り専用）
forms	HTMLCollection	HTMLFormElement をまとめて取得する（読み取り専用）
anchors	HTMLCollection	name 属性を持つ HTMLAnchorElement をまとめて取得する（読み取り専用）
links	HTMLCollection	href 属性を持つエレメントをまとめて取得する（読み取り専用）

■ DocumentView インターフェース

プロパティ名	型	説明
defaultView	AbstractView	AbstractView オブジェクトを取得する。Window オブジェクトに相当する。（読み取り専用）

■ドキュメントから Window オブジェクトを取得する

defaultView プロパティを使用します。

Internet Explorer 8 以前では対応していません。

かわりに、parentWindow プロパティを使用します。

ドキュメントから Window オブジェクトを取得する関数


// ------------------------------------------------------------
// ドキュメントから Window オブジェクトを取得する関数
// ------------------------------------------------------------
function DocumentGetDefaultView (document_obj){
	if(document_obj.defaultView) return document_obj.defaultView;
	if(document_obj.parentWindow) return document_obj.parentWindow;
	return null;
}

// ------------------------------------------------------------
// Window オブジェクトを取得する
// ------------------------------------------------------------
var window_obj = DocumentGetDefaultView(document);

// 出力テスト
cosole.log(window_obj == window); // true

上に戻る

現在のページのドメインを取得する

■生成元（オリジン）について

■生成元（オリジン）とは？

生成元（オリジン）とは、自身のリソースが格納されている場所です。

「プロトコル、ドメイン、ポート番号」の３つを合わせたものです。

■現在のページのドメインを取得する

document.domain プロパティを使用します。

これは、自身の生成元（オリジン）の、ドメイン部分に該当します。

現在のページのドメインを取得する


// 現在のページのドメインを取得する
var domain = document.domain;

// 出力テスト
console.log(domain);

■同一生成元ポリシー (Same-Origin Policy) について

クロスサイトスクリプトを行う事はできません。

例えば、「http://my.example.com」をブラウザで開くとします。

「http://my.example.com」のスクリプトは、動的に「http://other.example.com」を開けますが、このコンテンツ内にアクセスする事はできません。

■自身の生成元（オリジン）を、自身の上位ドメインに変更する

自身の生成元（オリジン）は、自身の上位ドメインへと変更する事ができます。

これは、サブドメインとの、クロススクリプトを許します。

すべてのサブドメインから、自身の環境へ侵入できるようになるので注意して下さい。

自身の生成元（オリジン）が、最初から上位であり、サブドメインとのクロススクリプトを許したい場合は、自身のドメインを明示的にセットする必要があります。

自身の生成元（オリジン）を、別のドメインに変更する事はできません。

サブドメインとのクロススクリプトを許す（自身のオリジンが「sub.example.com」である場合）


// 自身の生成元（オリジン）を「example.com」に変更する（サブドメインとのクロススクリプトを許す）
document.domain = "example.com";

■クロスサイトメッセージングを行う

異なるオリジン下のコンテンツ同士の場合、メッセージの送受信を行う事ができます。

Web Messaging については、こちらで解説しています。

上に戻る

現在のページの URL アドレスを取得する

■現在閲覧中のページの URL アドレスを取得する

document.URL プロパティを使用します。

■取得例

現在のページの URL アドレスを取得する


// 現在のページの URL アドレスを取得する
var url = document.URL;

// 出力テスト
console.log(url);

上に戻る

現在のページの読み込み状況を取得する

■現在閲覧中のページの読み込み状況を取得する

■読み込み状況が変化したか監視する

■ DOM ツリーの構築が完了したか監視する

■ページの読み込みがすべて完了したか監視する

■現在閲覧中のページの読み込み状況を取得する

document.readyState プロパティを使用します。

以下の文字列が得られます。

文字列	解説
"uninitialized"	初期化されていません。ロードが開始されていません。一部のブラウザでは、空のウィンドウを作成した直後などに該当します。
"loading"	ロード中です。DOM ツリーの構築中です。 <SCRIPT> 要素を使ってインラインな JavaScript を実行している場合などに該当します。自身の <SCRIPT> タグより以前に存在するタグは、DOM オブジェクト構築済みです。自身の <SCRIPT> タグより以降に存在するタグは、DOM オブジェクト未構築です。
"interactive"	DOM ツリーの構築は完了しています。画像データなどの読み込みはまだ完了していません。
"complete"	すべての読み込みが完了しています。

■ Internet Explorer 10 以前の注意点

"interactive" が得られるタイミングは、正しくない場合があるようです。

必ずしも DOM ツリーの構築が完了しているとは限りません。

onload イベントと、DOMContentLoaded イベントは正確です。

■読み込み状況が変化したか監視する

onreadystatechange イベントを使用します。

readyState プロパティの値が変化すると発行されます。

■使用例

現在のページの読み込み状況を監視する


// ------------------------------------------------------------
// ドキュメントの readyState が変化したときに実行される関数
// ------------------------------------------------------------
function DocumentReadyStateChangeFunc(e){

	// 現在のページの読み込み状況を取得する
	var state = document.readyState;

	// 出力テスト
	console.log("readyState:" + state);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(document.addEventListener){

	// ドキュメントの readyState が変化したときに実行されるイベント
	document.addEventListener("readystatechange",DocumentReadyStateChangeFunc);

// アタッチイベントに対応している
}else if(document.attachEvent){

	// ドキュメントの readyState が変化したときに実行されるイベント
	document.attachEvent("onreadystatechange" , DocumentReadyStateChangeFunc);

// イベントハンドラを使用する
}else{

	// ドキュメントの readyState が変化したときに実行されるイベント
	document.onreadystatechange = DocumentReadyStateChangeFunc;

}

■ DOM ツリーの構築が完了したか監視する

DOMContentLoaded イベントを使用します。

readyState が、"interactive" へ切り替わるタイミングに相当します。

Internet Explorer 8 以前では対応していません。

かわりに、onreadystatechange イベントを利用して調べます。

■使用例

DOM オブジェクトの構築が完了したか調べる


// ------------------------------------------------------------
// DOM オブジェクトの構築が完了すると実行される関数
// ------------------------------------------------------------
function DocumentReadyStateInteractiveFunc(e){

	// 現在のページの読み込み状況を取得する
	var state = document.readyState;

	alert("DOM オブジェクトの構築が完了した:" + state);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応しているか
if(document.addEventListener){

	// DOM オブジェクトの構築が完了すると実行されるイベント
	document.addEventListener("DOMContentLoaded" , DocumentReadyStateInteractiveFunc);

}

DOM オブジェクトの構築が完了したか調べる関数


// ------------------------------------------------------------
// DOM オブジェクトの構築が完了したか調べる関数
// ------------------------------------------------------------
function DocumentGetLoadedDomContent(document_obj,callback){

	if(document_obj.addEventListener){
		switch(document_obj.readyState){
		case "interactive":
		case "complete":
			callback();
			return;
		}

		document_obj.addEventListener("DOMContentLoaded" , function callee(e){
			document_obj.removeEventListener("DOMContentLoaded" , callee);
			callback();
		});

	}else if(document_obj.attachEvent){
		switch(document_obj.readyState){
		case "complete":
			callback();
			return;
		}

		var f = function (e){
			switch(document_obj.readyState){
			case "interactive":
			case "complete":
				document_obj.detachEvent("onreadystatechange" , f);
				callback();
				break;
			}
		};
		document_obj.attachEvent("onreadystatechange" , f);
	}
}


// ------------------------------------------------------------
// DOM オブジェクトの構築が完了したか調べる
// ------------------------------------------------------------
DocumentGetLoadedDomContent(document,function(){

	alert("DOM オブジェクトの構築が完了した");

});

■ページの読み込みがすべて完了したか監視する

onload イベントを使用します。

readyState が、"complete" へ切り替わるタイミングに相当します。

■使用例

ページの読み込みがすべて完了したか調べる


// ------------------------------------------------------------
// ページの読み込みがすべて完了すると実行される関数
// ------------------------------------------------------------
function DocumentReadyStateCompleteFunc(e){

	// 現在のページの読み込み状況を取得する
	var state = document.readyState;

	alert("ページの読み込みがすべて完了した:" + state);
}


// ------------------------------------------------------------
// イベントのリッスンを開始する
// ------------------------------------------------------------
// イベントリスナーに対応している
if(window.addEventListener){

	// ページの読み込みがすべて完了すると実行されるイベント
	window.addEventListener("load" , DocumentReadyStateCompleteFunc);

// アタッチイベントに対応している
}else if(window.attachEvent){

	// ページの読み込みがすべて完了すると実行されるイベント
	window.attachEvent("onload" , DocumentReadyStateCompleteFunc);

// イベントハンドラを使用する
}else{

	// ページの読み込みがすべて完了すると実行されるイベント
	window.onload = DocumentReadyStateCompleteFunc;

}

上に戻る

現在のページの最終更新日時を取得する

■現在のページの最終更新日時を取得する

document.lastModified プロパティを使用します。

GoogleChrome や Safari や Opera の場合、UTC 時間（協定世界時）が得られます。

Date.getTimezoneOffset() メソッドを使用して、ローカルな時間に変換します。

■取得例

現在のページの最終更新日時を取得する


// ------------------------------------------------------------
// Google Chrome で動作しているか調べる関数（Chromium 派生ブラウザを含む）
// ------------------------------------------------------------
function NavigatorGetExecutedInGoogleChrome(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Chromium で動作しているか
	return (user_agent.indexOf("Chrome") != -1);
}

// ------------------------------------------------------------
// Safari で動作しているか調べる関数
// ------------------------------------------------------------
function NavigatorGetExecutedInSafari(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Chromium 派生ブラウザを除外する
	if(user_agent.indexOf("Chrome") != -1)	return false;
	// Android 標準ブラウザを除外する
	if(user_agent.indexOf("Android") != -1)	return false;

	// Safari で動作しているか
	return (user_agent.indexOf("Safari") != -1);
}

// ------------------------------------------------------------
// Opera で動作しているか調べる関数（派生ブラウザを含む）
// ------------------------------------------------------------
function NavigatorGetExecutedInOpera(){
	// ユーザーエージェント情報を取得
	var user_agent = navigator.userAgent;

	// Opera で動作しているか
	if(user_agent.indexOf("OPR/") != -1)	return true;
	return (user_agent.indexOf("Opera") != -1);
}


// ------------------------------------------------------------
// 現在のページの最終更新日時を取得する
// ------------------------------------------------------------
// 現在のページの最終更新日時から Date オブジェクトを作成する
var date_obj = new Date(document.lastModified);

if(NavigatorGetExecutedInGoogleChrome() || NavigatorGetExecutedInSafari() || NavigatorGetExecutedInOpera()){

	// UTC 時間なのでローカルなミリ秒に変換する
	var millisecond = date_obj.getTime() - date_obj.getTimezoneOffset() * 60 * 1000;

	// ローカルなミリ秒から Date オブジェクトを作成する
	date_obj = new Date(millisecond);

}

// 出力テスト
console.log(date_obj);

上に戻る

現在のページのタイトルを取得する

■現在のページのタイトルを編集する

document.title プロパティを使用します。

■使用例

現在のページのタイトルを編集する


// 現在のページのタイトルを取得する
var title = document.title;

// 出力テスト
console.log(title);

// 現在のページのタイトルを変更する
document.title = "テストタイトル";

上に戻る

リファラ情報を取得する

■リファラ情報を取得する

リファラとは、現在のページから１つ前である「リンク元のページ」の情報です。

■リファラ情報を取得する

document.referrer プロパティを使用します。

■取得例

リファラ情報を取得する


// リファラ情報を取得する
var referrer = document.referrer;

// 出力テスト
console.log(referrer);

上に戻る

ドキュメントのサイズについて

■クライアント領域のサイズを取得する

■ドキュメント（HTML 全体）のサイズを取得する

■クライアント領域のサイズを取得する

■クライアント領域のサイズを取得する関数

クライアント領域のサイズを取得する関数です。

スクロールバーのサイズは、結果に含まれません。

ドキュメントのクライアント領域のサイズを取得する関数


// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
	var b = document_obj.body;
	var r = document_obj.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(document_obj.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}

■ビューポートのサイズを取得する（スクロールバーを含む）

こちらで解説しています。

■取得例

ドキュメントのクライアント領域のサイズを取得する


// --------------------------------------------------------------------------------
// ドキュメントのクライアント領域のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetClientSize(document_obj){
	var b = document_obj.body;
	var r = document_obj.documentElement;
	var w = b.clientWidth;
	var h;
	if(w < r.clientWidth)	w = r.clientWidth;
	if(document_obj.compatMode == "BackCompat"){
		h = b.clientHeight;
	}else{
		if(r.clientHeight){
			h = r.clientHeight;
		}else{
			h = b.clientHeight;
		}
	}
	return {
		width :w,
		height:h
	};
}


// ------------------------------------------------------------
// リサイズされるたびに実行されるイベント
// ------------------------------------------------------------
window.onresize = function (){

	// ドキュメントのクライアント領域のサイズを取得する
	var client_size = DocumentGetClientSize(document);

	// 出力テスト
	console.log("w:" + client_size.width);
	console.log("h:" + client_size.height);

};

■ドキュメント（HTML 全体）のサイズを取得する

■ドキュメント（HTML 全体）のサイズを取得する関数

ドキュメントのサイズが、クライアント領域より小さい場合は、クライアント領域のサイズが得られます。

ドキュメント（HTML 全体）のサイズを取得する関数


// --------------------------------------------------------------------------------
// ドキュメント（HTML 全体）のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetDocumentSize(document_obj){
	var e;
	var w = 0;
	var h = 0;

	e = document_obj.body;
	if(e){
		if(w < e.clientWidth)	w = e.clientWidth;
		if(w < e.scrollWidth)	w = e.scrollWidth;
		if(h < e.clientHeight)	h = e.clientHeight;
		if(h < e.scrollHeight)	h = e.scrollHeight;
	}
	e = document_obj.documentElement;
	if(e){
		if(w < e.clientWidth)	w = e.clientWidth;
		if(w < e.scrollWidth)	w = e.scrollWidth;
		if(h < e.clientHeight)	h = e.clientHeight;
		if(h < e.scrollHeight)	h = e.scrollHeight;
	}

	return {
		width :w,
		height:h
	};
}

■取得例

ドキュメント（HTML 全体）のサイズを取得する


// --------------------------------------------------------------------------------
// ドキュメント（HTML 全体）のサイズを取得する関数
// --------------------------------------------------------------------------------
function DocumentGetDocumentSize(document_obj){
	var e;
	var w = 0;
	var h = 0;

	e = document_obj.body;
	if(e){
		if(w < e.clientWidth)	w = e.clientWidth;
		if(w < e.scrollWidth)	w = e.scrollWidth;
		if(h < e.clientHeight)	h = e.clientHeight;
		if(h < e.scrollHeight)	h = e.scrollHeight;
	}
	e = document_obj.documentElement;
	if(e){
		if(w < e.clientWidth)	w = e.clientWidth;
		if(w < e.scrollWidth)	w = e.scrollWidth;
		if(h < e.clientHeight)	h = e.clientHeight;
		if(h < e.scrollHeight)	h = e.scrollHeight;
	}

	return {
		width :w,
		height:h
	};
}


// ------------------------------------------------------------
// ロードが完了すると実行されるイベント
// ------------------------------------------------------------
window.onload = function (){

	// ドキュメント（HTML 全体）のサイズを取得する
	var document_size = DocumentGetDocumentSize(document);

	// 出力テスト
	console.log("w:" + document_size.width);
	console.log("h:" + document_size.height);

};

上に戻る

ドキュメントの互換モードについて

■ブウラウザの現在のレンダリングモード（互換モード）を取得する

document.compatMode プロパティを使用します。

以下の文字列が得られます。

プロパティ名	説明
"CSS1Compat"	標準モード。標準化された仕様通りに動作する。
"BackCompat"	互換モード。古いブラウザと同等の動作をする。（非標準）

■取得例

ブウラウザのレンダリングモードを取得する


// ブウラウザのレンダリングモードを取得する
var compat_mode = document.compatMode;

// 出力テスト
console.log(compat_mode);

■「ブラウザの互換モード」と「ドキュメントタイプの宣言」の関係

ブウラウザがどのような互換モードで動作するかは、ドキュメントタイプ宣言の種類で決まります。

DOCTYPE 宣言は、HTML 文書の先頭に記述します。

ドキュメントタイプの記述を省略した場合は、互換モードで動作します。

互換モードが変化する、ドキュメントタイプ宣言の一例です。

互換モードで動作する例（HTML4.01 Transitional）


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <body>

    <script type="text/javascript">
    <!--
	// ブウラウザのレンダリングモードを出力
	alert(document.compatMode);
    //-->
    </script>

  </body>
</html>

標準モードで動作する例（HTML4.01 Strict）


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <body>

    <script type="text/javascript">
    <!--
	// ブウラウザのレンダリングモードを出力
	alert(document.compatMode);
    //-->
    </script>

  </body>
</html>

標準モードで動作する例（HTML5）


<!DOCTYPE html>
<html>
  <body>

    <script type="text/javascript">
    <!--
	// ブウラウザのレンダリングモードを出力
	alert(document.compatMode);
    //-->
    </script>

  </body>
</html>

上に戻る

前のページに戻る