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

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

HTML DOM の write() メソッドは、HTML や JavaScript などの複数の式をドキュメントに直接書き出すための機能です。ページの読み込み時に動的にコンテンツを生成したり、別ウィンドウへメッセージを出力したりする場面で活用されます。

注意: このメソッドには重要な特徴が2つあります。ひとつは、ドキュメント内にすでに HTML コードが存在する場合、それを上書きしてしまうという点。もうひとつは、引数を渡しても自動的には改行されず、そのまま連結されるという点です。用途によっては意図しない表示になることがあるため、挙動を理解した上で使うことが大切です。

構文

write() メソッドの基本的な構文は以下のとおりです。

document.write(arguments)

引数には文字列のほか、HTML タグや JavaScript の式をカンマ区切りで複数指定できます。

使用例

それでは、HTML DOM document write() メソッドの具体的な使用例を見てみましょう。以下のサンプルコードでは、入力された URL を子ウィンドウとして開き、氏名欄が「admin」以外(未認証ユーザー)の場合に、write() メソッドを使って子ウィンドウ上に警告メッセージを書き込みます。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM write()</title>
<style>
    * {
       padding: 2px;
       margin:5px;
    }
    form {
       width:70%;
       margin: 0 auto;
       text-align: center;
    }
    input[type="button"] {
       border-radius: 10px;
</style>
</head>
<body>
    <form>
       <fieldset>
          <legend>HTML-DOM-write( )</legend>
          <input id="urlSelect" type="url" placeholder="Type URL here..."><br>
          <input id="textSelect" type="text" placeholder="Full Name"><br>
          <input type="button" value="Go To" onclick="openWindow()">
          <input type="button" value="Close" onclick="closeWindow()">
          <input type="button" value="Restore" onclick="restoreWindow()">
          <div id="divDisplay"></div>
       </fieldset>
    </form>
    <script>
       var urlSelect = document.getElementById("urlSelect");
       var textSelect = document.getElementById("textSelect");
       var winSource;
       function openWindow() {
          browseWindow = window.open(urlSelect.value, "browseWindow", "width=400, height=200");
          winSource = urlSelect.value;
          browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Active";
          if(textSelect.value !== 'admin')
             browseWindow.document.write("<p><strong>Unauthorized User:</strong></p>","<p>"+textSelect.value+"</p>");
       }
       function closeWindow(){
          if(browseWindow){
             browseWindow.close();
             browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Closed";
          }
       }
       function restoreWindow(){
          if(browseWindow.closed){
             browseWindow = window.open(winSource, "browseWindow", "width=400, height=200");
             browseWindow.opener.document.getElementById("divDisplay").textContent = "Child Window Restored";
          }
       }
    </script>
</body>
</html>

このコードのポイントは次のとおりです。

  • window.open() で指定した URL を子ウィンドウとして開きます。
  • 氏名が「admin」以外の場合、browseWindow.document.write() により、子ウィンドウの内容が「Unauthorized User(未認証ユーザー)」という警告メッセージで上書きされます。
  • [Close] ボタンで子ウィンドウを閉じ、[Restore] ボタンで同じ URL のウィンドウを再び開くこともできます。

実行結果

未認証の氏名(「admin」以外)を入力した状態で [Go To] ボタンをクリックすると、子ウィンドウに警告メッセージが表示されます。

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

一方、認証済みの氏名(「admin」)を入力した状態で [Go To] ボタンをクリックすると、write() メソッドによる上書きは行われず、指定したページがそのまま表示されます。

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

  1. HTML DOM の fullscreenEnabled プロパティとは？使い方とサンプルコードを解説

    HTML DOM の fullscreenEnabled は、現在のドキュメントでフルスクリーンモードが利用可能かどうかを判定するためのプロパティです。戻り値の型は真偽値（boolean）で、読み取り専用となっています。フルスクリーンモードが利用可能な場合は true を返し、利用できない場合は false を返します。なお、ブラウザによって実装が異なるため、動作させるには各ブラウザに対応したベンダープレフィックスを使い分ける必要があります。構文（シンタックス）fullscreenEnabled の基本的な構文は以下の通りです。document.fullscreenEnabledサンプルコード

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

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