JavaScriptでHTMLタイトルを取得する方法
JavaScriptでHTMLページのタイトルを取得する方法
HTMLページのタイトルを取得するには、JavaScriptのDOM (Document Object Model) APIを使用します。DOMは、HTML文書をオブジェクトの階層として表現し、JavaScriptから操作できるようにします。
document.titleプロパティを使用する
最もシンプルで一般的な方法は、document.titleプロパティを使用することです。このプロパティは、現在のHTMLページのタイトルを表します。
// HTMLページのタイトルを取得
var title = document.title;
// タイトルを表示
console.log(title);
document.querySelector()メソッドを使用する
document.querySelector()メソッドは、CSSセレクタを使用してHTML要素を取得します。タイトルは通常、<title>要素に含まれているため、これをターゲットにしてタイトルを取得できます。
// タイトル要素を取得
var titleElement = document.querySelector('title');
// タイトルを取得
var title = titleElement.textContent;
// タイトルを表示
console.log(title);
注意
innerHTMLプロパティを使用することもできますが、HTML要素のマークアップ全体を取得し、場合によっては望ましくない結果になることがあります。textContentプロパティは、要素内のすべてのテキストノードのテキストを結合して取得します。
例
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<script>
// 方法1: `document.title`プロパティ
var title1 = document.title;
console.log("Method 1: " + title1);
// 方法2: `document.querySelector()`メソッド
var titleElement = document.querySelector('title');
var title2 = titleElement.textContent;
console.log("Method 2: " + title2);
</script>
</body>
</html>
このコードを実行すると、コンソールに次の出力が表示されます。
Method 1: My Web Page
Method 2: My Web Page
コードの全体像
// HTMLページのタイトルを取得
var title = document.title;
// タイトルを表示
console.log(title);
このコードは、非常にシンプルな2行で構成されています。
コードの解説
-
var title = document.title;var title;の部分は、titleという名前の変数を宣言しています。この変数に、これから取得するHTMLページのタイトルを格納します。document.title;の部分は、現在のHTMLドキュメントのタイトルを取得する部分です。documentは、現在のHTMLドキュメント全体を表すオブジェクトで、titleは、そのドキュメントのタイトルを表すプロパティです。つまり、この行では、document.titleで取得したタイトルを、先ほど宣言したtitle変数に代入しています。
-
console.log(title);console.log()は、ブラウザの開発者ツールのコンソールに、渡された値を出力する関数です。titleの部分には、先ほど取得したタイトルが格納されているので、この行を実行すると、コンソールにHTMLページのタイトルが表示されます。
もう一つの例：document.querySelector()を使った場合
// タイトル要素を取得
var titleElement = document.querySelector('title');
// タイトルを取得
var title = titleElement.textContent;
// タイトルを表示
console.log(title);
このコードは、document.querySelector()を使って<title>要素を取得し、その要素のテキスト内容（つまり、タイトル）を取得する方法です。
-
var titleElement = document.querySelector('title');document.querySelector()は、CSSセレクタを使ってHTML要素を取得するメソッドです。'title'の部分は、CSSセレクタで<title>要素を指定しています。つまり、この行では、HTMLドキュメントの中から<title>要素を探して、その要素をtitleElementという変数に代入しています。
-
var title = titleElement.textContent;titleElement.textContentは、titleElement変数に格納されている要素（つまり、<title>要素）のテキスト内容を取得します。このテキスト内容が、HTMLページのタイトルになります。- 取得したテキスト内容を、
title変数に代入します。
-
- 前の例と同様に、コンソールにタイトルを出力します。
document.querySelector()は、CSSセレクタを使って要素を特定し、その要素のテキスト内容からタイトルを取得する方法です。document.titleは、直接タイトルを取得するシンプルな方法です。
どちらを使うべきかは、状況によって異なります。
<title>要素だけでなく、他の要素の情報を一緒に取得したい場合は、document.querySelector()を使うと柔軟に処理できます。- シンプルにタイトルだけを取得したい場合は、
document.titleが便利です。
応用
取得したタイトルを、JavaScriptで様々な処理に利用することができます。例えば、
- タイトルを元に、ユーザーに情報を表示する など、様々なことが可能です。
- タイトルを元に、別のページに遷移する
- タイトルを元に、ページの内容を動的に変更する
DOMParserを利用した方法
DOMParser は、文字列からDOMオブジェクトを作成するインターフェースです。HTMLの文字列をパースし、その内容をDOMとして操作することができます。
// HTMLの文字列
var htmlString = '<html><head><title>My Page</title></head><body></body></html>';
// DOMParserを作成
var parser = new DOMParser();
// HTML文字列をDOMに変換
var doc = parser.parseFromString(htmlString, "text/html");
// タイトル要素を取得
var titleElement = doc.querySelector('title');
// タイトルを取得
var title = titleElement.textContent;
console.log(title); // Output: My Page
この方法は、外部からHTML文字列を取得し、その中のタイトルを取得したい場合に便利です。例えば、Ajaxで別のページのHTMLを取得し、そのタイトルを抽出するといったケースが考えられます。
jQueryを利用した方法
jQuery は、JavaScriptのライブラリで、DOM操作を簡潔に記述できるようになっています。
// jQueryでタイトルを取得
var title = $('title').text();
console.log(title);
jQueryを使用すると、document.querySelector()よりも簡潔にタイトルを取得できます。ただし、jQueryを導入する必要があるため、プロジェクトの規模や他のライブラリとの兼ね合いを考慮する必要があります。
XPathを利用した方法
XPath は、XML文書内の要素を検索するための言語です。HTMLもXMLの一種とみなせるため、XPathを使ってタイトル要素を特定することができます。
// XPathでタイトル要素を取得
var titleElement = document.evaluate("//title", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
var title = titleElement.textContent;
console.log(title);
XPathは、複雑な条件で要素を検索したい場合に有効です。ただし、XPathの文法を理解する必要があるため、学習コストがかかります。
どの方法を選ぶかは、以下の要素を考慮して決定します。
- ライブラリの利用
jQueryはライブラリが必要 - 複雑な検索
XPathは複雑な検索に適している - 外部HTML
DOMParserは外部HTMLの処理に適している - 柔軟性
document.querySelector()やjQueryは柔軟性が高い - シンプルさ
document.titleが最もシンプル
一般的には、document.titleが最もシンプルで、document.querySelector()が汎用性が高いと言えます。しかし、より複雑な処理が必要な場合は、他の方法も検討してみましょう。
- 可読性
コードの可読性を考慮して、適切な方法を選びましょう。 - パフォーマンス
処理の速度は、使用するメソッドやブラウザによって異なります。 - ブラウザの互換性
各ブラウザでDOM操作のサポート状況が異なる場合があります。
javascript html dom
