ywork2020.com

Title

ページタイトルを操作する

目次 (INDEX)

documentとは

ここで説明するdocument とは次の語句からなるjavascriptの変数であり、Documentオブジェクトを参照します。 また、Windowオブジェクトのプロパティでもあります。
document
読み: ドキュメント
意味: 文書、書類

titleとは

ここで説明するtitle とは次の語句からなるjavascriptのプロパティです。
title
読み: タイトル
意味: 表題、題名

目次に戻る

Documentオブジェクトtitleプロパティの概要

このプロパティを使うとHTML文書を読み込んだWebブラウザのページタイトルの値にアクセスすることができます。

つまり、ページタイトルを取得したり変更することができるということです。

これはDocumentオブジェクトのプロパティです。 Documentオブジェクトはdocument変数、またはWindowオブジェクトのdocumentプロパティから参照します。

目次に戻る

サンプルコードと実行結果

このページのサンプルではボタンをクリックするとページタイトルを変更することができます。 また、変更と同時にタイトルの値を取得して出力をするようにしています。 近年のブラウザはタブウィンドウでページを表示するものが主流であり、そのタブの部分にタイトルを表示するものが多いので ボタンをクリックした後にページタイトルが変更されているか確認してみてください。

サンプルコード: HTML
<body>
	<p><input type="text" value="Title: Hello New World" id="idText"></p>
	<p><output id="idOutput">innerHTML</output></p>
	<p><input type="button" value="ボタン" onclick="evtName()"></p>
</body>
  • 02: input要素text型 (この要素の値でページタイトルを書き換える)
  • 03: output要素 (ページタイトル値を取得して出力する)
  • 04: input要素button型 (クリックするとevtName()関数を呼び出す)
サンプルコード: script
<script>
	let elmText = document.getElementById("idText");
	let elmOutput = document.getElementById("idOutput");
	function evtName(){
		document.title = elmText.value;
		elmOutput.innerHTML = document.title;
	}
</script>
  • 02: 変数の宣言 (elmTextという変数でidTextの識別子をもつ要素を参照する)
  • 03: 変数の宣言 (elmOutputという変数でidOutputの識別子をもつ要素を参照する)
  • 04-07: 関数の作成 (evtName()という名前の関数を作成する)
  • 05: 関数内の処理 (titleプロパティの値にelmTextのvalue値を代入する)
  • 06: 関数内の処理 (elmOutputのinnerHTMLプロパティにtitle値を代入する)
実行結果:

サンプルテキスト: id="idText" / 初期値: Hello New World | YWORK

出力: id="idOutput"
innerHTML

実行:

目次に戻る

応用: h1要素に自動でページタイトルを表示する

ここでは単純かつ機能的なtitleプロパティの使い方の一例を紹介しておきます。

この例はjqueryも使っているのでコード部分の詳細は割愛させていただきますが、 h1要素にid属性を設定して、その属性値をターゲットにして、取得したタイトル値を代入しています。 その後、jqueryで正規表現文字の部分に指定されたテキストを削除するというものです。

このサンプルではタイトル値が「Hello New World | YWORK」と仮定しており、このタイトル値から「 | YWORK」の文字を削除するというものです。 文字の削除に使う 正規表現
「/\ \| YWORK/」 となります。

サンプルコード: HTML
<head>
	<title>Hello New World | YWORK</title>
</head>
<body>
	<h1 id="idTitle">ここに自動でタイトル値が出力される</h1>
</body>
サンプルコード: script
<script>
	document.addEventListener("DOMContentLoaded",function(){
		document.getElementById("idTitle").innerHTML = document.title;
		/*jquery*/
		$('#idTitle').each(function(){
			let txt = $(this).text();
			$(this).html(txt
				.replace(/正規表現文字/g,"")
			);
		});
	},false);
</script>

※ 正規表現文字には \ \| YWORK を当てはめる
※ Windowsでは円マークで表示されるかもしれませんが、\の文字はコード上ではバックスラッシュのことです。

実行結果:

仮定タイトル: 「Hello New World | YWORK」

出力: <h1>innerHTML</h1>

目次に戻る

document.titleを使用する上での要点

  1. このプロパティはHTML文書のtitle要素の値にアクセスすることができます

目次に戻る