JavaScriptのdocumentオブジェクトはHTMLドキュメントを表現するオブジェクトです。
documentオブジェクトはWindowオブジェクトの一部であり、window.document プロパティを通じてアクセスできる。
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 にコピーされます。
allプロパティは、ドキュメント内のすべてのオブジェクトの情報を保持するコレクションである。
<p>document.all.length = <span id="all-length"></span></p>
<script>
document.getElementById('all-length').innerHTML = document.all.length
</script>document.all.length =
anchorsプロパティは、ドキュメントに含まれるA要素のうち、name属性が指定されたA要素の配列である。id属性が指定されたA要素は含まない。
<p>document.anchors.length = <span id="anchors-length"></span></p>
<script>
document.getElementById('anchors-length').innerHTML = document.anchors.length
</script>document.anchors.length =
cookieプロパティは文書のクッキーである。
Google Chromeの場合、「chrome://settings/cookies」を開くことでクッキーの内容を確認できる。
<p>document.cookie = <span id="cookie"></span></p>
<script>
document.getElementById('cookie').innerHTML = document.cookie
</script>上記JavaScriptの実行結果を次に示す。
document.cookie =
クッキーに値を保存する場合、以下に示す書式でcookieプロパティに値を設定する。
document.cookie = "name=value[;expires=gmt][;domain=domain][;path=path][;secure]";パラメータ名
有効期限。時刻はGMTで設定する必要がある。このパラメータを省略すると、ブラウザを閉じた時点で消去される。
Cookieを読みとれるドメインを設定する。このパラメータが無いと、現在のサーバのFQDNが設定される。
Cookieを取得できる範囲を指定する。このパラメータを省略すると、現在のページと同じ階層が設定される。たとえば、
/javascript/document.html でCookieを設定した場合、
/javascript/ 内にあるページのみがCookieを取得できる。
httpsで接続したときのみ読み取り可能。
クッキーは、書き込んだディレクトリのパスを含む場所から読み出すことができる。たとえば、segakuin.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)」と呼ぶ。
たとえば、ユーザがsegakuin.comを訪れている場合、segakuin.comから発行されているクッキーがファーストパーティークッキーであり、www.example.comから発行されているクッキーがサードパーティークッキーである。
サードパーティークッキーはおもにバナー広告で使われている。
文書を表示するためにブラウザより使用されるモード
documentModeプロパティの使い方を次に示す。
<p>document.documentMode = <span id="documentmode"></span></p>
<script>
document.getElementById('documentmode').innerHTML = document.documentMode
</script>document.documentMode =
domainプロパティには、文書をロードしたサーバのドメイン名が格納されている。
<p>document.domain = <span id="domain"></span></p>
<script>
document.getElementById('domain').innerHTML = document.domain
</script>document.domain =
documentオブジェクトのformsプロパティは、HTML文書に含まれるすべてのform要素の配列である。
formsプロパティの使い方は次のとおり。
document.formsHTML文書に含まれるform要素の個数
document.forms.length次のいずれかの方法で、個別のフォームオブジェクトを参照できる。
document.forms[index]document.forms['id']document.forms['name']文書に含まれるすべての画像の配列
imagesプロパティの使い方を次に示す。
<p>document.images.length = <span id="images-length"></span></p>
<script>
document.getElementById('images-length').innerHTML = document.images.length
</script>document.images.length =
lastModifiedプロパティには、ドキュメントの最終更新日付と最終更新時刻が格納されている。
<p>document.lastModified = <span id="lastmodified"></span></p>
<script>
document.getElementById('lastmodified').innerHTML = document.lastModified
</script>document.lastModified =
linksプロパティは、ドキュメントに含まれるA要素及びAREA要素(href属性が指定されたもの)の配列である。
linksプロパティの使い方を次に示す。
<p>document.links.length = <span id="links-length"></span></p>
<script type="text/javascript">
document.getElementById('links-length').innerHTML = document.links.length
</script>document.links.length =
新しいドキュメントを作成（オープン）します。
<script>
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>CSSのセレクタで指定した条件にマッチした最初の要素を取得する。
document.querySelector(selectors)myclass というクラスが指定された要素のうち、最初に出現する要素を取得する。
let element = document.querySelector(".myclass");CSSのセレクタで指定した条件にマッチするすべての要素を取得する。
document.querySelectorAll(selectors)myclass というクラスが指定された要素をすべて取得する。
let elements = document.querySelector(".myclass");documentオブジェクトのreadyStateプロパティは、HTML文書のロード（読み込み）状況を表す文字列を返す。
| readyState | 説明 |
|---|---|
| loading | 読み込み中 |
| interactive | パース（構文解析）は完了したが、画像やCSSなどのサブリソースは読み込み中 |
| complete | サブリソースの読み込みも完了 |
<p>document.readyState = <span id="readystate"></span></p>
<script>
document.getElementById('readystate').innerHTML = document.readyState
</script>document.readyState =
現在の文書をロードした文書のURL(リファラ)
referrerプロパティの使い方を次に示す。
<p>document.referrer = <span id="referrer"></span></p>
<script>
document.getElementById('referrer').innerHTML = document.referrer
</script>document.referrer =
documentオブジェクトのtitleプロパティには、ドキュメントのタイトルが格納されている。
<p>document.title = <span id="title"></span></p>
<script>
document.getElementById('title').innerHTML = document.title
</script>document.title =
documentオブジェクトのURLプロパティには、ドキュメントのURLが格納されている。
<p>document.URL = <span id="url"></span></p>
<script>
document.getElementById('url').innerHTML = document.URL
</script>document.URL =
指定したIDを持つ要素のElementオブジェクトを返す。
getElementById(id)HTML要素にIDを付けると、IDを指定してJavaScriptから参照や更新を行うことができる。HTML要素にIDを付けるには、id属性を指定する。たとえば、td要素にIDを付けるには次のようにする。
<table>
<tbody>
<tr>
<td id="sample1"></td>
</tr>
</tbody>
</table>"sample1"というIDを付けられたtd要素をJavaScriptで次のように表現できる。
document.getElementById("sample1")"sample1"というIDを付けられたtd要素の開始タグと終了タグの間のHTMLは、JavaScriptで次のように表現できる。
document.getElementById("sample1").innerHTML<td> と </td> の間に text というHTMLを挿入する例を次に示す。
<script>
document.getElementById("sample1").innerHTML = "text";
</script>getElementsByClassNameはクラス名を指定して要素を取得するメソッドである。同じクラス名を持つ要素は複数あり得るので、戻り値は要素のコレクションである。
getElementsByClassNameメソッドの使い方を次に示す。
var elements = document.getElementsByClassName("foo");
for (i = 0; i < elements.length; i++) {
document.writeln(elements[i].className);
}HTMLCollection document.getElementsByName(name)要素のHTMLCollectionを返す。
ラジオボタンの状態を取得する例を示す。
function getRadioValue() {
var elements = document.getElementsByName("name1");
for (i = 0; i < elements.length; i++) {
if (elements[i].checked) {
return elements[i].value;
}
}
}getElementsByTagNameは、指定したタグ名の要素すべてを取得するメソッドである。
document.getElementsByTagName(tagName)getElementsByTagNameメソッドの使い方を次に示す。
<p>sample <del id="del01">sample</del> sample <del id="del02">sample</del>
sample <del id="del03">sample</del></p>
<script>
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
ブラウザに文字列を出力します。HTMLのタグも出力可能です。出力する文字列は " と " で囲んで指定します。
document.write(string)HTML5ではdocument.writeの使用は推奨されていません。代わりにelement.innerHTML又はelement.insertAdjacentHTMLなどを使うことをお勧めします。
document.write の使用例と表示サンプルを次に示します。
<script>
document.write("<pre>");
document.write("最初の文字列");
document.write("次の文字列");
document.write("<\/pre>");
</script>ブラウザに文字列を出力します。文字列の末尾には改行が自動的に付けられます。HTMLのタグも出力可能です。出力する文字列は " と " で囲んで指定します。
document.writeln(string)document.writeln の使用例と表示サンプルを次に示します。
<script>
document.writeln("<pre>");
document.writeln("最初の文字列");
document.writeln("次の文字列");
document.writeln("</pre>");
</script>