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

JavaScriptでドキュメントの内容を置き換える方法をわかりやすく解説

JavaScriptでは、document.open()、document.write()、document.close() を組み合わせることで、現在表示されているドキュメントの内容を新しいコンテンツに置き換えることができます。

特に document.open("text/html", "replace") のように第2引数に "replace" を指定すると、履歴に新しいエントリを追加せず、現在のドキュメントを新しい内容で上書きします。これにより、ページ全体の内容を動的に差し替えることが可能です。

サンプルコード

以下のコードを実行して、ボタンをクリックするとドキュメントの内容が新しいテキストに置き換わる動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <p>クリックするとこの内容が置き換えられます。</p>
      <button onclick = "Display()">置き換える</button>
      
      <script>
         function Display() {
            document.open("text/html","replace");
            document.write("<p>デモ用テキストです！</p>");
            document.close();
         }
      </script>
      
   </body>
</html>

コードの解説

  • document.open("text/html", "replace")：ドキュメントの書き込みを開始します。"replace" を指定することで、既存のドキュメントを置き換えます。
  • document.write()：新しいHTMLコンテンツをドキュメントに書き込みます。
  • document.close()：書き込みを終了し、ブラウザにドキュメントの読み込み完了を通知します。

ボタンをクリックすると、元の段落とボタンが消え、「デモ用テキストです！」という新しい内容だけが表示されます。このように、JavaScriptを使えばページ全体のコンテンツを簡単に入れ替えることができます。

  1. JavaScriptのdocument.formsプロパティでフォーム数を取得する方法

    document.formsとはJavaScriptのdocument.formsプロパティは、現在のドキュメント内に存在するすべての<form>要素のコレクション（HTMLCollection）を返します。このコレクションのlengthプロパティを参照することで、ドキュメント内にいくつの<form>タグが含まれているかを簡単に取得できます。サンプルコード以下のコードでは、ページ内に2つのフォームを配置し、document.forms.lengthを使ってフォームの総数を取得して表示しています。<!DOCTYPE html> <html> &nb

  2. JavaScriptのdocument.cookieでドキュメントに関連付けられたCookieを取得する方法

    JavaScriptでは、documentオブジェクトを使って、ドキュメントに関するあらゆる情報を扱うことができます。このオブジェクトが提供するdocument.cookieプロパティを利用すれば、現在のドキュメントに関連付けられたCookieを簡単に取得できます。なお、このプロパティへのアクセスは読み取り操作のみのため、スクリプト内の他のコードに影響を与えることはありません。 構文 document.cookieは、Cookieを「名前=値」のペアとして保持し、複数のCookieはセミコロン（;）とスペースで区切られた1つの文字列として返されます。 cookie = document.coo