JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのdocument.titleでタイトルタグの書き換え

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

JavaScriptのdocument.titleでタイトルタグの書き換え

JavaScriptのdocument.titleでタイトルタグの書き換え

HTMLの title タグの文字列の書き換えを、JavaScriptのdocument.title プロパティを使って書き換えます。

かかかず
かかかず

めちゃめちゃ簡単なスニペットです。

使うシーンはあまりないかもしれませんが、そんなプロパティを使ったJavaScriptのコードについて解説します。

document.title

JavaScriptのdocument.title は、現在のページの<title> タグの名前を取得したり、設定するプロパティです。

document.title="変更後のタイトル";
かかかず
かかかず

ページのタイトルを変更したいときに使うプロパティです。

タイトルタグを書き換えるサンプル

以下のボタンをクリックすると、この記事のタイトルが「変更後のタイトル」に書き換わり、ついでウィンドウに「タイトルを書き換えました。」と表示が出ます

書き換えた後にソースを表示するとタイトルタグは変更されずそのままですが、chromeのデベロッパーツールで見ると、タイトルタグが書き換わっていることを確認することができます。

かかかず
かかかず

ボタンクリックで、ページのタイトルが変わります。

サンプルのコード

まずはHTMLの記述ですが、タイトル書き換えのトリガーになる button タグを設置するだけです。

<button id="titleChangeBtn">titleを書き換えるボタン</button>
かかかず
かかかず

ボタンには、JavaScriptでトリガーにする id を付与しておきます。

JavaScriptも簡単な記述で、クリックイベントの.addEventListener() を使って、「titleChangeBtn」のidを持つボタンがクリックされたら document.title プロパティでこのページのタイトルを書き換えます。

document.getElementById('titleChangeBtn').addEventListener('click', () => {
     document.title = "変更後のタイトル"; // タイトルの書き換え
     window.alert("タイトルを書き換えました。") //アラート表示
});

window.alert()は、ウィンドウにアラート表示を出すメソッドで、ボタンクリックで書き換えが完了したかが不明なので追記しています。