JavaScriptのdocument.openとdocument.closeとは？使い方・注意点を初心者向けに解説
document.open() と document.close() は、HTML ドキュメントへの書き出し処理を開始・終了するためのメソッドです。
ただし使い方を誤るとページ内容が消えてしまうため、仕組みを正しく理解することが重要です。
document.open / document.close の基本
document.open(MIMEタイプ); // ドキュメントの書き出し開始
document.close(); // 書き出し終了
document.close(); // 書き出し終了
- document.open()：ドキュメントを開き、書き込み可能な状態にする
- document.close()：書き込みを終了し、ブラウザに表示させる
- MIMEタイプは省略可能（省略時は text/html）
重要： 現在のページで document.open() を実行すると、
そのページの内容はすべて消去され、書き換えられます。
openメソッド｜ドキュメントの書き出し開始
document.open() を実行すると、HTML 文書が「書き込み可能な状態」になります。
HTML 以外の形式で書き出したい場合は MIME タイプを指定します。
document.open(“text/plain”); // プレーンテキストとして書き出す
MIMEタイプとは？
MIMEタイプは、コンテンツの種類を表す文字列です。
- text/plain（テキスト）
- text/html（HTML）
- image/jpeg（JPEG画像）
省略した場合は text/html として扱われます。
closeメソッド｜書き出し終了
document.close() は、open で開始した書き込み処理を終了し、
ブラウザに内容を反映させるためのメソッドです。
// ウィンドウ newWin のドキュメントを書き換える
newWin.document.open();
newWin.document.write(“<h1>新しい内容</h1>”);
newWin.document.close();
newWin.document.open();
newWin.document.write(“<h1>新しい内容</h1>”);
newWin.document.close();
注意： close を呼ばないとページが「読み込み中」のままになってしまいます。
Window.open() と混同しないよう注意
window.open() は「新しいウィンドウ（またはタブ）を開く」メソッドで、
document.open() とはまったく別物です。
- window.open() → 新しいウィンドウを開く
- document.open() → ドキュメントの書き出しを開始する
DOMにおける document.open()
JavaScript の document.open() では MIME タイプを指定できますが、
DOM 仕様では引数なしで使用する点に注意してください。
まとめ
- document.open() はドキュメントの書き出し開始
- document.close() は書き出し終了
- 現在のページで使うと内容が消えるので注意
- window.open() とは別物
- MIMEタイプを指定すると HTML 以外の形式で書き出せる
