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