HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのclose()メソッドとは？使い方とサンプルコードを解説

HTML DOMのclose()メソッドは、出力ストリームを閉じるために使用されるメソッドです。ドキュメントへの書き込みが完了したことをブラウザに通知する役割を持ちます。このメソッドは引数（パラメータ）を一切受け取らず、呼び出し時にはそれまでに書き込まれたすべてのデータが表示された状態でストリームが閉じられます。

close()メソッドの構文

HTML DOMのclose()メソッドの構文は以下の通りです。

document.close()

close()メソッドの使用例

ここでは、ボタンをクリックすると出力ストリームを開き、テキストを書き込んだ後、最後にストリームを閉じるサンプルを見てみましょう。

<!DOCTYPE html>
<html>
<body>
<p>下のボタンをクリックすると、出力ストリームを開いてテキストを書き込み、最後に閉じます。</p>
<button onclick="streamClose()">CLOSE STREAM</button>
<script>
    function streamClose() {
        document.open();
        document.write("<h1>SAMPLE HEADING</h1>");
        document.write("<h2>SAMPLE HEADING 2</h2>");
        document.write("<p>A paragraph</p>");
        document.close();
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのclose()メソッドとは？使い方とサンプルコードを解説

CLOSE STREAMボタンをクリックすると、以下のように出力が切り替わります。

HTML DOMのclose()メソッドとは？使い方とサンプルコードを解説

コードの解説

このサンプルでは、クリックされるとstreamClose()関数を実行する「CLOSE STREAM」ボタンを作成しています。

<button onclick="streamClose()">CLOSE STREAM</button>

streamClose()関数内では、まずdocumentオブジェクトに対してopen()メソッドを呼び出します。これにより新しい出力ストリームが開かれ、それまでドキュメントに書き込まれていた内容はすべてクリアされます。

続いて、document.write()を使って<h1>要素、<h2>要素、そして<p>要素をドキュメントに書き込みます。最後に、documentオブジェクトのclose()メソッドを呼び出すことで、開いていた出力ストリームを閉じています。

function streamClose() {
    document.open();
    document.write("<h1>SAMPLE HEADING</h1>");
    document.write("<h2>SAMPLE HEADING 2</h2>");
    document.write("<p>A paragraph</p>");
    document.close();
}

まとめ

close()メソッドは、document.open()で開いた出力ストリームを明示的に閉じるためのメソッドです。document.write()による書き込みが終わった後に必ず呼び出すことで、ブラウザに「これ以上データは来ない」と伝え、ドキュメントの読み込みを確定させることができます。動的にコンテンツを生成する際には、open()・write()・close()をセットで使うのが基本の流れです。

  1. HTML DOM writeln()メソッドの使い方を徹底解説！サンプルコード付き

    HTML DOM の writeln() メソッドは、複数の式（HTML や JavaScript）をドキュメントに直接書き込むための機能を提供します。注意： このメソッドは、ドキュメント内に既存の HTML コードがある場合、それを上書きします。また、渡された引数はそれぞれ新しい行に追加される点が特徴です。構文writeln() メソッドの基本的な構文は以下の通りです。document.writeln(argument1, argument2, ...)カンマで区切ることで、複数の引数（文字列や HTML 要素など）を一度に渡すことができます。各引数は改行されて出力されます。writeln(

  2. HTML DOM write()メソッドとは?構文と使い方を実例で解説

    HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。構文write() メソッド