HTML DOM titleプロパティとは？使い方とサンプルコードを解説
HTML DOM titleプロパティとは
HTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。
title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。
構文
title属性の値を取得する場合：
ElementOfHTMLObject.title
title属性に文字列を設定する場合：
ElementOfHTMLObject.title = string
使用例：titleプロパティでヒントテキストを追加する
以下の例では、テキスト入力フィールドに対してボタンをクリックすると、title属性が空かどうかを判定し、空であれば新しいヒント文字列を動的に設定します。設定後、フィールド上にマウスを乗せるとツールチップが表示されるようになります。
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM title</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>HTML-DOM-title</legend>
<input type="text" id="textSelect" title="" >
<input type="button" onclick="getTitle()" value="上記フィールドの説明を定義する">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var textSelect = document.getElementById("textSelect");
function getTitle() {
if(textSelect.title === ''){
divDisplay.textContent = '詳細情報を設定しました！フィールドにマウスを乗せてください';
textSelect.title = '氏名をフルネームで入力してください';
}
}
</script>
</body>
</html>実行結果
「上記フィールドの説明を定義する」ボタンをクリックする前：
この時点では、入力フィールドのtitle属性は空のため、マウスを重ねても何も表示されません。
「上記フィールドの説明を定義する」ボタンをクリックした後：
ボタンをクリックすると、JavaScriptによってtitle属性に「氏名をフルネームで入力してください」という文字列が設定され、入力フィールドにマウスカーソルを重ねるとツールチップが表示されるようになります。
まとめ
HTML DOMのtitleプロパティを使えば、ユーザーへの補足情報や入力ガイドを動的に提供できます。フォームのバリデーションヒントやUIのアクセシビリティ向上など、さまざまな場面で活用できる便利なプロパティです。
-
HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説
HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示
-
HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説
HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと