JavaScript documentオブジェクト

JavaScriptのdocumentオブジェクトはHTMLドキュメントを表現するオブジェクトです。

window.document

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

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

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]";
name

パラメータ名

expires

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

domain

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

path

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

secure

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

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

documentModeプロパティの使い方を次に示す。

<p>document.documentMode = <span id="documentmode"></span></p>
<script>
  document.getElementById('documentmode').innerHTML = document.documentMode
</script>

document.documentMode =

domain

domainプロパティには、文書をロードしたサーバのドメイン名が格納されている。

<p>document.domain = <span id="domain"></span></p>
<script>
  document.getElementById('domain').innerHTML = document.domain
</script>

document.domain =

forms

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

formsプロパティの使い方は次のとおり。

document.forms

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

document.forms.length

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

document.forms[index]
document.forms['id']
document.forms['name']
index
0から始まるインデックス番号
id
識別子(form要素のid属性)
name
名前(form要素のname属性)

images

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

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

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 =

open

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

<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>

querySelector

document.querySelector(selectors")
selectors
CSSのセレクタ

myclass というクラスが指定された要素を取得する。

var element = document.querySelector(".myclass")

readyState

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 =

referrer

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

referrerプロパティの使い方を次に示す。

<p>document.referrer = <span id="referrer"></span></p>
<script>
  document.getElementById('referrer').innerHTML = document.referrer
</script>

document.referrer =

title

documentオブジェクトのtitleプロパティには、ドキュメントのタイトルが格納されている。

<p>document.title = <span id="title"></span></p>
<script>
  document.getElementById('title').innerHTML = document.title
</script>

document.title =

URL

documentオブジェクトのURLプロパティには、ドキュメントのURLが格納されている。

<p>document.URL = <span id="url"></span></p>
<script>
  document.getElementById('url').innerHTML = document.URL
</script>

document.URL =

getElementById

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

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

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

<table border="1">
  <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はクラス名を指定して要素を取得するメソッドである。同じクラス名を持つ要素は複数あり得るので、戻り値は要素のコレクションである。

getElementsByClassNameメソッドの使い方を次に示す。

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

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;
    }
  }
}

getElementsByTagName

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

document.getElementsByTagName(tagName)
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

write

ブラウザに文字列を出力します。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>

writeln

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

document.writeln(string)

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

<script>
  document.writeln("<pre>");
  document.writeln("最初の文字列");
  document.writeln("次の文字列");
  document.writeln("</pre>");
</script>