JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでドキュメントのタイトルと完全なURLを取得する方法

JavaScriptのHTML DOMは、HTMLデータへアクセスし操作するための基本的なメソッドを数多く提供しています。ドキュメントのタイトルやURLを取得したい場合も、それぞれ専用のプロパティが用意されています。タイトルにはdocument.title、URLにはdocument.URLを使うことで、簡単に値を取り出せます。ここでは、それぞれの使い方を順番に見ていきましょう。

ドキュメントのタイトルを取得する

ドキュメントのタイトルを取得するには、JavaScriptのHTML DOMが提供するdocument.titleプロパティを使用します。このプロパティは、HTML内の<title>要素に設定されているテキストをそのまま文字列として返します。

次の例では、ドキュメントのタイトルを取得し、画面に表示しています。

コード例

<html>
<head>
   <title>Tutorix</title>
</head>
<body>
<script>
   document.write("The title of the document is" +" "+ document.title);
</script>
</body>
</html>

実行結果

Tutorix

このように、<head>内の<title>タグに記述された「Tutorix」が、document.titleによって正しく取得できていることがわかります。

ドキュメントの完全なURLを取得する

ドキュメントのURLを取得するには、document.URLプロパティを使用します。このプロパティは、現在読み込まれているページの完全なURL（プロトコル、ドメイン、パスまで含む）を文字列として返します。

次の例では、ドキュメントのURLを取得して表示しています。

コード例

<html>
<body>
<script>
   document.write("The URL of the document is:" + " " +document.URL)
</script>
</body>
</html>

実行結果

The URL of the document is: https://www.tutorialspoint.com/cg/assets/ovPEzF.php

実行結果から、ページが読み込まれた際の完全なURLが取得できていることが確認できます。

まとめ

ドキュメントのタイトルを取得するにはdocument.title、完全なURLを取得するにはdocument.URLを使用します。どちらも引数不要で呼び出せるシンプルなプロパティなので、デバッグ時の情報表示やページ状態の確認など、さまざまな場面で活用できます。

  1. JavaScriptでドキュメント内の特定のアンカー要素を取得・表示する方法

    JavaScriptでは、ドキュメント内のアンカータグ（<a>タグ）が配列のような（array-like）構造として管理されています。特定のアンカー要素を取得して表示したい場合は、document.anchorsコレクションにインデックス番号を指定し、innerHTMLプロパティを組み合わせます。これは、配列から特定の要素を取り出すときとまったく同じ考え方です。 構文 element = document.anchors[i].innerHTML; 例1：最初のアンカー要素を表示する 次の例では、ページ内にある2つのアンカータグのうち、最初のアンカー要素のテキストを表示しています

  2. 【JavaScript】ドキュメント全体のHTMLを文字列として取得する方法を解説

    Webページのソースコード全体を取得して処理したい場面は、デバッグや動的なコンテンツ操作など、JavaScript開発では意外と多くあります。この記事では、ドキュメント全体のHTMLを文字列として取得する方法を、具体的なコード例とともにわかりやすく解説します。 innerHTMLプロパティを使った取得方法 ドキュメント全体のHTMLを文字列として取得するには、document.documentElementのinnerHTMLプロパティを利用します。 document.documentElement.innerHTML; document.documentElementはHTML文書のルート要