ywork2020.com

Title

要素やテキストを書き込む

目次 (INDEX)

documentとは

ここで説明する document とは次の語句からなるjavascriptの変数であり、Documentオブジェクトを参照します。 また、Windowオブジェクトのプロパティでもあります。
document
読み: ドキュメント
意味: 文書、書類

writeとは

write とは次の語句からなるjavascriptのメソッドです。
write
読み: ライト
意味: 書く

目次に戻る

Documentオブジェクトwriteメソッドの概要

このメソッドは、引数に与えた要素(DOMString)やテキストをブラウザがドキュメント読み込むときに文書ストリーム内に書き込みます。 また引数に数値や計算式を与えて結果を出力することもできます。 引数は「,」カンマ区切りで複数の値を列挙することもできます。

前述で文書ストリーム内に書き込むと表現しましたが、簡単にいうと文書の読込み時に書き込む(出力する)ということです。 このメソッドを読込みが終わったドキュメントから関数などで呼び出すと、文書ストリーム外で使用していることになるので 現在のドキュメントはリセットされます。

このメソッドを実行する前にdocument.open()メソッドを実行する必要がありますが、コードにdocument.open()の記述がなくても 自動的にdocument.open()が呼び出されて実行されることになっています。

document.open()は自動的に呼び出されるとはいえ、ブラウザによっては自動で呼び出しされない可能性がないわけではないので、 明示的にdocument.open()を記述することをお勧めします。この場合、コードの終りにはdocument.close()の記述もお勧めします。

目次に戻る

サンプルコードと実行結果

このサンプルでは普通のテキストとdiv要素にテキストを内包したものをdocument.writeで出力してみます。

サンプルコード: CSS
<style>
	#idWrite{
		font-size: 1cm;
		color: blue;
	}
</style>
  • 02: セレクタ{ (idWriteの識別子を持つ要素にCSSを適用)
  • 03: フォントサイズ (文字の高さ1cm)
  • 04: カラー (文字の色は青)
  • 05: } (idWriteのCSS設定を終わる)
サンプルコード: script
<script>
	document.open();
	document.write('サンプル<br>', '<span id="idWrite">サンプル<span>');
	document.close();
</script>
  • 02: ドキュメントオープン (記述しなくても、自動的に呼び出される)
  • 03: ドキュメントライト (文書ストリーム内にbr要素とspan要素とテキストを出力)
  • 04: ドキュメントクローズ (記述しなくても、自動的に呼び出される)
実行結果:

目次に戻る

document.writeを使用する上での要点

  1. このメソッドは文書ストリーム内に要素やテキスト、数字などを出力します
  2. 引数にはカンマ区切りで複数の値を列挙することもできます

目次に戻る