JavaScriptのdocumentオブジェクトはHTMLドキュメント及びXHTMLドキュメントを表現するオブジェクトであり、DOMのDocumentインタフェース、HTMLDocumentインタフェース及びGlobalEventHandlersインタフェースが実装されている。documentオブジェクトはWindowオブジェクトの一部であり、 window.document プロパティを通じてアクセスできる。

スポンサーリンク

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

documentオブジェクトのプロパティ
プロパティ 説明
all ドキュメント内のすべてのオブジェクトの情報を保持するコレクション(Internet Explorerの独自拡張)
anchors ドキュメントに含まれるすべてのA要素(name属性が指定されたもの)の配列
applets ドキュメントに含まれるすべてのアプレットの配列
body 文書のBODY要素
cookie クッキー
documentMode 文書を表示するためにブラウザより使用されるモード
domain 文書をロードしたサーバのドメイン名
forms 文書に含まれるすべてのform要素の配列
form-name name属性の値がform-nameのform要素
images 文書に含まれるすべての画像の配列
lastModified 文書の最終更新日付及び最終更新時刻
links ドキュメントに含まれるすべてのA要素及びAREA要素の配列
onblur blurイベントが発生したときに呼び出されるイベントハンドラ
onchange changeイベントが発生したときに呼び出されるイベントハンドラ
onclick clickイベントが発生したときに呼び出されるイベントハンドラ
onfocus focusイベントが発生したときに呼び出されるイベントハンドラ
onkeydown keydownイベントが発生したときに呼び出されるイベントハンドラ
onkeypress keypressイベントが発生したときに呼び出されるイベントハンドラ
onkeyup keyupイベントが発生したときに呼び出されるイベントハンドラ
onload loadイベントが発生したときに呼び出されるイベントハンドラ
onmousedown mousedownイベントが発生したときに呼び出されるイベントハンドラ
onmousemove mousemoveイベントが発生したときに呼び出されるイベントハンドラ
onmouseout mouseoutイベントが発生したときに呼び出されるイベントハンドラ
onmouseover mouseoverイベントが発生したときに呼び出されるイベントハンドラ
onmouseup mouseupイベントが発生したときに呼び出されるイベントハンドラ
onreset resetイベントが発生したときに呼び出されるイベントハンドラ
onselect selectイベントが発生したときに呼び出されるイベントハンドラ
onsubmit submitイベントが発生したときに呼び出されるイベントハンドラ
readyState 文書の(ロード中の)ステータス
referrer 現在の文書をロードした文書のURL(リファラ)
title 文書のタイトル
URL 文書のURL

メソッド

documentオブジェクトのメソッド
メソッド 説明
close 前にdocument.open()で開いた出力ストリームを閉じる。
createElement 新たに要素を生成する。
createEvent Eventオブジェクトを作成する。
createTextNode 新たにテキストノードを作成する。
getElementById ID(id属性の値)から要素を取得する。
getElementsByClassName クラス名(class属性)から要素群を取得
getElementsByName 名前(name属性)から要素群を取得
getElementsByTagName タグ名から要素群を取得
open 新しい文書を開く
write 文字列を出力
writeln 文字列と改行を出力
スポンサーリンク

ブラウザの対応状況

このページを閲覧しているウェブブラウザの対応状況を示す。

プロパティ 対応状況
document.createEvent
document.createEventObject

allプロパティ

ドキュメント内のすべてのオブジェクトの情報を保持するコレクション(Internet Explorerの独自拡張)

<script type="text/javascript">document.writeln(document.all.length);</script>

anchors

anchorsプロパティは、ドキュメントに含まれるA要素のうち、name属性が指定されたA要素の配列である。id属性が指定されたA要素は含まない。

<script type="text/javascript">document.writeln(document.anchors.length);</script>

formsプロパティ

documentオブジェクトのformsプロパティは、HTML文書に含まれるすべてのform要素の配列である。

document.forms

HTML文書に含まれるform要素の個数

document.forms.length

次のいずれかの方法で、個別のフォームオブジェクトを参照できる。

document.forms[index]
document.forms['id']
document.forms['name']
index

0から始まるインデックス番号

id

識別子(form要素のid属性)

name

名前(form要素のname属性)

cookieプロパティは文書のクッキーである。

Google Chromeの場合、「chrome://settings/cookies」を開くことでクッキーの内容を確認できる。

<script type="text/javascript">
  document.writeln(document.cookie);
</script>

上記JavaScriptの実行結果を次に示す。

クッキーに値を保存する場合、以下に示す書式でcookieプロパティに値を設定する。

document.cookie = "name=value[;expires=gmt][;domain=domain][;path=path][;secure]";
name

パラメータ名

expires

有効期限。時刻はGMTで設定する必要がある。このパラメータを省略すると、ブラウザを閉じた時点で消去される。

domain

Cookieを読みとれるドメインを設定する。このパラメータが無いと、現在のサーバのFQDNが設定される。

path

Cookieを取得できる範囲を指定する。このパラメータを省略すると、現在のページと同じ階層が設定される。たとえば、 /javascript/document.html でCookieを設定した場合、 /javascript/ 内にあるページのみがCookieを取得できる。

secure

httpsで接続したときのみ読み取り可能。

クッキーは、書き込んだディレクトリのパスを含む場所から読み出すことができる。たとえば、itref.fc2web.com/dir1/file1.htmlで書き込んだクッキーの値は次の場所から読み出すことができる。

しかし、次の場所からは読み出すことができない。

クッキーの削除

クッキーファイル自体を削除することはできないので、値をクリアしたうえ、有効期限切れにする。

function deleteCookie(name)
{
    // 日付データを作成する。
    var expireDate = new Date();
    // 1970年1月1日 00:00:00の日付データを設定する。
    expireDate.setTime(0);
    // 有効期限を過去にして書き込む。
    document.cookie = name + "=;expires=" + expireDate.toGMTString();
}

ファーストパーティークッキーとサードパーティークッキーの違い

ユーザが訪れているドメインから発行されているクッキーを「ファーストパーティークッキー(First-party cookies)」、ユーザが訪れているドメイン以外から発行されているクッキーをサードパーティークッキー(Third-party cookies)」と呼ぶ。

たとえば、ユーザがitref.fc2web.comを訪れている場合、itref.fc2web.comから発行されているクッキーがファーストパーティークッキーであり、www.example.comから発行されているクッキーがサードパーティークッキーである。

サードパーティークッキーはおもにバナー広告で使われている。

documentModeプロパティ

文書を表示するためにブラウザより使用されるモード

<script type="text/javascript">document.writeln(document.documentMode);</script>

domainプロパティ

文書をロードしたサーバのドメイン名

<script type="text/javascript">document.writeln(document.domain);</script>

imagesプロパティ

文書に含まれるすべての画像の配列

<script type="text/javascript">document.writeln(document.images.length);</script>

lastModifiedプロパティ

文書の最終更新日付及び最終更新時刻

<script type="text/javascript">document.writeln(document.lastModified);</script>

linksプロパティは、ドキュメントに含まれるA要素及びAREA要素(href属性が指定されたもの)の配列である。

<script type="text/javascript">document.writeln(document.links.length);</script>

readyStateプロパティ

documentオブジェクトのreadyStateプロパティは、HTML文書のロード(読み込み)状況を表す文字列を返す。

readyState 説明
loading 読み込み中
interactive パース(構文解析)は完了したが、画像やCSSなどのサブリソースは読み込み中
complete サブリソースの読み込みも完了
<script type="text/javascript">
  document.writeln(document.readyState);
</script>

referrerプロパティ

現在の文書をロードした文書のURL(リファラ)

<script type="text/javascript">document.writeln(document.referrer);</script>

titleプロパティ

文書のタイトル

<script type="text/javascript">document.writeln(document.title);</script>

URLプロパティ

文書のURL

<script type="text/javascript">document.writeln(document.URL);</script>

フォームの操作

JAVAスクリプトからテキスト入力フィールドに値を設定することができます。

document. FORM要素の名前 . INPUT要素の名前 .value = ;

例えば次のようなHTMLを用意します。 form 要素には form1、 input 要素には text1、text2 という名前を付けます。 ボタンがクリックされたら JavaScript の copy_text という関数を呼び出すようにします。

<form method="post" name="form1">
 <input type="text" name="text1" value="初期値">
 <input type="text" name="text2">
 <input type="button" onclick="copy_text()" value="コピー">
</form>

次に JavaScript の copy_text 関数の定義を示します。テキスト入力フィールドに値を設定するには、次のようにします。

function copy_text()
{
    document.form1.text2.value = document.form1.text1.value;
}

次に実際の表示サンプルを示します。表示結果はブラウザによって異なることがあります。 ボタンをクリックすると、テキスト入力フィールド text1 の値が text2 にコピーされます。

スポンサーリンク

getElementById

指定したIDを持つ要素のElementオブジェクトを返す。

getElementById(id)
id
要素のID(id属性の値)

HTML要素にIDを付けると、IDを指定してJavaScriptから参照や更新を行うことができる。HTML要素にIDを付けるには、id属性を指定する。たとえば、td要素にIDを付けるには次のようにする。

<table border=1>
<tr>
<td id="sample1"></td>
</tr>
</table>

"sample1"というIDを付けられたtd要素をJavaScriptで次のように表現できる。

document.getElementById("sample1")

"sample1"というIDを付けられたtd要素の開始タグと終了タグの間のHTMLは、JavaScriptで次のように表現できる。

document.getElementById("sample1").innerHTML

<td> と </td> の間に text というHTMLを挿入する例を次に示す。

<script type="text/javascript">
<!--
    document.getElementById("sample1").innerHTML = "text";
// -->
</script>

getElementsByClassNameメソッド

var elements = document.getElementsByClassName("foo");
for (i = 0; i < elements.length; i++)
{
    document.writeln(elements[i].className);
}

getElementsByTagNameメソッド

getElementsByTagNameは、指定したタグ名の要素すべてを取得するメソッドである。

document.getElementsByTagName(tagName)
tagName
タグ名(要素タイプ名)

タグ名を指定して全要素を取得するJavaScriptのサンプルコードを次に示す。

<p>sample <del id="del01">sample</del> sample <del id="del02">sample</del>
    sample <del id="del03">sample</del></p>
<script type="text/javascript">
<!--
    var elements = document.getElementsByTagName("del");
    document.write("<p>" + elements.length + "個のdel要素が見つかりました。</p>");
    for (i = 0; i < elements.length; i++) {
        document.write("<p>id=" + elements[i].id + "</p>");
    }
// -->
</script>

上記のJavaScriptサンプルコードの実行例を次に示す。

sample sample sample sample sample sample

getElementsByNameメソッド

HTMLCollection document.getElementsByName(name)
name
要素のname属性の値

要素のHTMLCollectionを返す。

ラジオボタンの状態を取得する例を示す。

function getRadioValue()
{
    var elements = document.getElementsByName("name1");
    for (i = 0; i < elements.length; i++)
    {
        if (elements[i].checked)
        {
            return elements[i].value;
        }
    }
}

openメソッド

新しいドキュメントを作成(オープン)します。

<script type="text/javascript">
<!--
function newpage() {
  document.open();
  document.write("<html><title>newpage<\/title>");
  document.write("<body>newpage<\/body><\/html>");
  document.close();
}
// -->
</script>
<form method="post">
  <input type="button" value="newpage" onclick="newpage()">
</form>

writeメソッド

ブラウザに文字列を出力します。HTMLのタグも出力可能です。出力する文字列は " と " で囲んで指定します。

document.write(string)

HTML5ではdocument.writeの使用は推奨されていません。代わりにelement.innerHTML又はelement.insertAdjacentHTMLなどを使うことをお勧めします。

document.write の使用例と表示サンプルを次に示します。

<script type="text/javascript">
<!--
  document.write("<pre>");
  document.write("最初の文字列");
  document.write("次の文字列");
  document.write("<\/pre>");
// -->
</script>

writelnメソッド

ブラウザに文字列を出力します。文字列の末尾には改行が自動的に付けられます。HTMLのタグも出力可能です。出力する文字列は " と " で囲んで指定します。

document.writeln(string)

document.writeln の使用例と表示サンプルを次に示します。

<script type="text/javascript">
<!--
  document.writeln("<pre>");
  document.writeln("最初の文字列");
  document.writeln("次の文字列");
  document.writeln("</pre>");
// -->
</script>
このエントリーをはてなブックマークに追加
スポンサーリンク