ページのタイトルを書き換える

最終更新日：2023-06-15
公開日：2020-05-19

ページのタイトルを動的に書き換える方法について解説します。

この記事のポイント

ページのタイトルを動的に書き換える
ページのタイトルを取得する

ページのタイトルを書き換える

ページのタイトルはdocumentオブジェクトのtitleプロパティから取得したり変更することができます。
以下の例ではボタンを押すとページタイトルが書き換わります。

コードは次のようになります。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GRAYCODE JavaScript</title>
  <script>
    window.addEventListener('load', (event) => {

      document.getElementById('button1').addEventListener('click', () => {
        document.title = document.getElementById('button1').textContent;
      });

      document.getElementById('button2').addEventListener('click', () => {
        document.title = document.getElementById('button2').textContent;
      });

      document.getElementById('button3').addEventListener('click', () => {
        document.title = document.getElementById('button3').textContent;
      });
    });
  </script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">タイトル1</button>
<button id="button2">タイトル2</button>
<button id="button3">タイトル3</button>
</body>
</html>

赤字の箇所でdocument.titleプロパティに新しいタイトルを代入する形で書き換えを行っています。

ボタンは3つともクリックのイベントリスナーと同じ処理が設定されています。
クリックするとボタンのラベルをtextContentプロパティで取得して、その値をそのままdocument.titleプロパティに代入します。

ページのタイトルを取得する

先にページタイトルの書き換え方法をみてきましたが、タイトルを取得する場合は次のようにdocument.titleプロパティを参照する形で行います。

JavaScript コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>GRAYCODE JavaScript</title>
  <script>
    window.addEventListener('load', (event) => {

      let title = document.title;
      console.log(title);
    });
  </script>
</head>
<body>
<h1>JavaScriptレシピ</h1>
<button id="button1">タイトル1</button>
<button id="button2">タイトル2</button>
<button id="button3">タイトル3</button>
</body>
</html>

document.titleプロパティから取得したページタイトルを変数titleに代入し、そのままコンソール出力しています。

記事一覧

ページのタイトルを書き換える

JavaScript コード例

ページのタイトルを取得する

JavaScript コード例

関連記事