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

【初心者向け】JavaScriptのdocument.titleでページタイトルを取得・変更する方法

JavaScriptでWebページのタイトル（<title>タグの内容）を操作したい場合は、document.title プロパティを使用します。

document.titleとは？

document.title は、現在表示しているHTMLドキュメントのタイトルを読み書きできるプロパティです。

  • 値を取得する場合： var x = document.title; のように参照することで、現在のタイトル文字列が返されます。
  • 値を変更する場合： document.title = "新しいタイトル"; のように代入すると、ブラウザのタブやウィンドウに表示されるタイトルを動的に書き換えられます。

サンプルコード：タイトルを取得して表示する

以下のコードを実行すると、document.title を使ってページのタイトルを取得し、画面に出力できます。

<!DOCTYPE html>
<html>
    <head>
        <title>Demo Title</title>
    </head>
    <body>
        <script>
            var x = document.title;
            document.write("Our Title: " + x);
        </script>
    </body>
</html>

この例では、<head>内で設定された「Demo Title」が読み取られ、「Our Title: Demo Title」という形で画面に表示されます。

実行結果

Our Title: Demo Title

タイトルを動的に変更する例

応用として、ボタン操作などでタイトルを書き換えることも可能です。

<button onclick="document.title='新しいタイトル'">タイトルを変更</button>

このように document.title を活用すれば、通知件数をタブに表示したり、ページの状態に応じてタイトルを更新したりといった動的な処理も簡単に実装できます。

  1. JavaScriptのHTML DOMでaddEventListener()メソッドを使う方法をわかりやすく解説

    addEventListener()メソッドとは？ addEventListener()メソッドを使用すると、指定したHTML要素にイベントハンドラ（イベント発生時に実行される関数）を追加できます。クリックやダブルクリック、キー入力など、さまざまなイベントに対する処理を柔軟に登録できるのが特徴です。 基本的な構文は以下のとおりです。 要素.addEventListener(イベント名, 実行する関数); 同じ要素・同じイベントに対して複数のハンドラを登録できる点が、onclick属性などの従来の書き方との大きな違いです。 サンプルコード 次のコードを実行して、ボタンをダブルクリックしてみてくだ

  2. MongoDBにJavaScript関数を保存・実行する方法をわかりやすく解説

    MongoDBに保存されたJavaScriptを操作する方法 MongoDBでは、JavaScriptの関数をデータベース内の特別なコレクション「system.js」に保存できます。この仕組みを利用すれば、よく使う処理をサーバー側に登録しておき、必要なときにいつでも呼び出すことが可能です。関数の保存には db.system.js.save() メソッドを使用します。 JavaScript関数を保存する基本構文 db.system.js.save({ _id: anyFunctionName, value: function (returnValue) { re