【JavaScript】たった一行でできる！HTMLページのタイトルを取得する方法3選

2024-06-24

JavaScript で HTML ページのタイトルを取得する方法

このチュートリアルでは、JavaScript を使用して HTML ページのタイトルを取得する方法について説明します。 3 つの主要な方法と、それぞれの利点と欠点について紹介します。

方法 1: document.title プロパティを使用する

説明:

これは、HTML ページのタイトルを取得する最も簡単で基本的な方法です。 document.title プロパティは、現在のページのタイトルに直接アクセスできます。

例:

var pageTitle = document.title;
console.log(pageTitle);

出力:

My Awesome Website

利点:

シンプルでわかりやすい
他の方法よりも高速

タイトルを変更することはできません

方法 2: getElementsByTagName() メソッドを使用する

この方法は、より柔軟なアプローチです。 getElementsByTagName() メソッドを使用して、title 要素を取得し、そのコンテンツにアクセスできます。

var titleElements = document.getElementsByTagName('title');
var pageTitle = titleElements[0].textContent;
console.log(pageTitle);

My Awesome Website

タイトルを変更できます
複数の title 要素がある場合に役立ちます

document.title プロパティよりも少し遅い

方法 3: querySelector() メソッドを使用する

この方法は、最新の JavaScript ブラウザで利用できる、より現代的な方法です。 querySelector() メソッドを使用して、title 要素を CSS セレクターで選択し、そのコンテンツにアクセスできます。

var pageTitle = document.querySelector('title').textContent;
console.log(pageTitle);

My Awesome Website

簡潔でエレガント
パフォーマンスが優れている

古いブラウザではサポートされていない場合があります

シンプルで高速な方法が必要な場合は、document.title プロパティを使用します。
タイトルを変更したり、複数の title 要素を処理したりする必要がある場合は、getElementsByTagName() メソッドを使用します。
最新のブラウザで簡潔でエレガントな方法が必要な場合は、querySelector() メソッドを使用します。

補足

上記の例では、textContent プロパティを使用して要素のコンテンツを取得しています。 innerHTML プロパティを使用すると、要素の HTML コンテンツを取得できます。
タイトルを変更するには、document.title プロパティに新しい値を代入します。

document.title = "New Page Title";

HTML コード:

<!DOCTYPE html>
<html>
<head>
  <title>My Awesome Website</title>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a sample page for demonstrating how to get the page title with JavaScript.</p>
  <script>
    // 方法 1: document.title プロパティを使用する
    var pageTitle1 = document.title;
    console.log("方法 1:", pageTitle1);

    // 方法 2: getElementsByTagName() メソッドを使用する
    var titleElements = document.getElementsByTagName('title');
    var pageTitle2 = titleElements[0].textContent;
    console.log("方法 2:", pageTitle2);

    // 方法 3: querySelector() メソッドを使用する
    var pageTitle3 = document.querySelector('title').textContent;
    console.log("方法 3:", pageTitle3);
  </script>
</body>
</html>

方法 1: My Awesome Website
方法 2: My Awesome Website
方法 3: My Awesome Website

この HTML コードは、title 要素内に "My Awesome Website" というタイトルを持つシンプルな Web ページを作成します。
<script> タグ内には、3 つの JavaScript コードブロックがあります。
各コードブロックは、前述の 3 つの方法のいずれかを使用して、ページのタイトルを取得し、コンソールにログ出力します。

このサンプルコードを実行すると、ブラウザのコンソールに以下の出力が表示されます。

方法 1: My Awesome Website
方法 2: My Awesome Website
方法 3: My Awesome Website

このコード例は、それぞれの方法がどのように機能するかを理解するのに役立つはずです。

JavaScript で HTML ページのタイトルを取得するその他の方法

DOMParser を使用する

この方法は、DOMParser API を使用して HTML ドキュメントを解析し、title 要素を取得することでタイトルを取得します。

const parser = new DOMParser();
const doc = parser.parseFromString(document.documentElement.outerHTML, "text/html");
const title = doc.querySelector('title').textContent;
console.log(title);

柔軟性が高い。HTML ドキュメント全体にアクセスできるので、タイトル以外の情報も取得できます。
非同期処理に適している。

他の方法よりも複雑で冗長である。

正規表現を使用する

この方法は、正規表現を使用して HTML ソースコードからタイトルを抽出します。

const regex = /<title>(.*?)<\/title>/;
const match = document.documentElement.outerHTML.match(regex);
const title = match[1];
console.log(title);

特定の条件に一致するタイトルのみを抽出できる。

複雑で理解しにくい場合がある。
正規表現の書き方が間違っていると、予期しない結果になる可能性がある。

Ajax を使用する

この方法は、Ajax リクエストを使用してサーバーから現在のページのタイトルを取得します。

const xhr = new XMLHttpRequest();
xhr.open('GET', '/', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(xhr.responseText, "text/html");
    const title = doc.querySelector('title').textContent;
    console.log(title);
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.send();