HTML DOM Titleオブジェクトとは？textプロパティの使い方をわかりやすく解説
HTML DOM Titleオブジェクトの概要
HTML DOM の Title オブジェクトは、HTML ドキュメント内の <title> 要素を表すオブジェクトです。このオブジェクトを利用することで、JavaScript からページのタイトルを動的に取得したり変更したりすることが可能になります。
<title> 要素の作成方法
新しい <title> 要素を作成するには、document.createElement() メソッドを使用します。
var titleObject = document.createElement("TITLE")ここで作成した「titleObject」には、以下のプロパティが用意されています。
| プロパティ | 説明 |
|---|---|
| text | ドキュメントの <title> 要素の値を設定、または取得します |
textプロパティの使用例
それでは、「title text」プロパティを使った具体的なサンプルコードを見ていきましょう。ボタンをクリックすると、現在のドキュメントのタイトルを取得して表示する例です。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title id="titleSelect">HTML DOM Title text</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend id="legendSelect"></legend>
<input type="button" onclick="getTitleText()" value="What's the title of document?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var legendSelect = document.getElementById("legendSelect");
var titleSelect = document.getElementById("titleSelect");
function getTitleText() {
divDisplay.textContent = 'Title of document: '+titleSelect.text;
legendSelect.textContent = titleSelect.text.split(' ').join('-');
}
</script>
</body>
</html>実行結果
ボタンをクリックする前
「What's the title of document?」ボタンをクリックする前の画面は次のとおりです。
ボタンをクリックした後
ボタンをクリックすると、JavaScript の getTitleText() 関数が実行され、titleSelect.text によってドキュメントのタイトルが取得されます。その結果、取得したタイトルが画面に表示され、legend 要素にはタイトル内のスペースがハイフン「-」に置き換えられたテキストが表示されます。
まとめ
HTML DOM の Title オブジェクトを使えば、<title> 要素の内容を JavaScript から簡単に操作できます。特に text プロパティは、ページタイトルの動的な取得や変更に便利なので、ぜひ活用してみてください。
-
HTML DOM HRオブジェクトとは？作成方法と使い方を解説
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
-
HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注