HTML DOM open()メソッドとは？構文から実例までわかりやすく解説
document.open()メソッドは、現在のHTMLドキュメントに対して新しい出力ストリームを開き、document.write()などを使ってコンテンツを書き込める状態にするためのDOM APIです。呼び出すと既存のドキュメント内容がクリアされ、まったく新しいドキュメントとして書き換えられます。
構文
open()メソッドの基本的な構文は以下の通りです。
document.open(type, replace);
パラメータ
- type：書き込むドキュメントの種類（MIMEタイプ）を表します。通常は「text/html」が使われ、省略することもできます。
- replace：新しいドキュメントの履歴エントリが、そのドキュメントを開いた元のドキュメントの履歴エントリを引き継ぐかどうかを指定します。こちらも省略可能です。
使用例
それでは、open()メソッドの具体的な使用例を見てみましょう。ボタンをクリックすると、新しいドキュメントが出力されるシンプルなデモです。
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:35%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>DOM open() Method Demo</h1>
<button onclick="openMethod()" class="btn">Click me to try Open() Method</button>
<script>
function openMethod() {
document.open();
document.write(`
<style>
body{
text-align:center;
color:#fff;
background: #ff7f5094;
}
</style>
<h1>DOM open() Method Demo</h1>
<p>New document</p>
`);
document.close();
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、まず次のような画面が表示されます。
ここで青色のボタンをクリックしてみましょう。open()メソッドによって新しい出力ストリームが開かれ、document.write()で書き込んだ内容が表示されます。
注意点
- open()で開いた出力ストリームは、最後にdocument.close()を呼び出して必ず閉じてください。閉じないと、ブラウザがページの読み込み完了を正しく認識できないことがあります。
- open()を実行すると元のドキュメントの内容はすべて消去されるため、既存のDOMは参照できなくなります。
- 現代のWeb開発では、動的に要素を追加する場合はcreateElement()やappendChild()といった安全なDOM操作APIを使うことが一般的に推奨されています。
-
HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き
HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(
-
HTML DOM write()メソッドとは?構文と使い方を実例で解説
HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド