ywork2020.com

Title

要素やテキストを書き出す

目次 (INDEX)

documentとは

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

write とは

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

目次に戻る

Document.write メソッドの概要

このメソッドは、引数に与えたデーターを文書ストリームに書き出します。

引数に与えたデーターとは、数値や文字列などのことです。 もちろんこの中には DOMString ( HTML 要素として認識される ) や計算式を処理した結果も含まれます。

引数には複数の値を 「 , 」 カンマで区切って列挙することができます。

前述で 「 文書ストリームに書き出す 」と表現しましたが、 これを簡単にいうと、ブラウザが文書を読込む時にスクリプトが読み込まれた時点で書き出し処理が行われるということです。

このメソッドを文書ストリームの外 ( 読込みが完了したドキュメント ) から関数などを使って呼び出すと、 以下に記述している document.open() の実行により、読込みが完了した現在のドキュメントはリセットされます。

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

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

このメソッドは、ブラウザのレンダリングに影響をあたえる可能性があるとして、 HTML5 では非推奨となりました。 document.write() の代替案として、候補の中から以下の 2つを挙げますが、どちらを選択するかは状況によって異なります。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

document.write(markup);

目次に戻る

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

このサンプルでは普通のテキストと span 要素にテキストを内包したものを 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: ドキュメントクローズ (記述しなくても、自動的に呼び出される)
実行結果:

目次に戻る