[HTML5] JavaScriptでtitleタグを変更する

小ネタです。 titleタグの内容を指定した文字列に変更する場合は2つの方法があります。

まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。

document.title = 'foo'

次にtitle以外の要素を変更するときと同様にquerySelector()で返却されたHTMLElementを操作する方法もあります。

document.querySelector('title').textContent = 'foo'

サンプルコード
参考ページ

サンプルコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf8">
  <title>ボタンを押すとここが変化するよ</title>
</head>
<body>

<h1>titleタグを変更するサンプル</h1> 

<button type="button" id="orange">オレンジ</button>
<button type="button" id="apple">りんご</button>
<button type="button" id="banana">バナナ</button>

<script>
document.querySelector('#orange').addEventListener('click', ()=>{
  document.title = '🍊オレンジ';
})
document.querySelector('#apple').addEventListener('click', ()=>{
  document.title = '🍎りんご';
})
document.querySelector('#banana').addEventListener('click', ()=>{
  document.title = '🍌バナナ';
})
</script>
</body>
</html>

サンプルコード

参考ページ