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

HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。

構文（シンタックス）

テキスト値を取得する場合

titleElementObject.text

テキスト値を文字列として設定する場合

titleElementObject.text = string

設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルとして反映されます。

Title text プロパティの使用例

以下のサンプルでは、ボタンをクリックするとドキュメントのタイトルを取得して画面に表示し、さらにタイトル内のスペースをハイフン「-」に置き換えた文字列を legend 要素に出力します。

<!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>

実行結果

ボタンをクリックする前

初期状態では、legend 部分と表示領域は空のままです。

HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

「What's the title of document?」ボタンをクリックした後

ボタンをクリックすると、getTitleText() 関数が実行され、<title> 要素のテキストである「HTML DOM Title text」が画面に表示されます。同時に、スペースを「-」に置き換えた「HTML-DOM-Title-text」という文字列が legend 部分に出力されます。

HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

まとめ

text プロパティを使えば、<title> 要素の内容を簡単に参照・更新できます。動的にページタイトルを切り替えたい場合や、現在のタイトル情報を取得して別の要素に表示したい場合などに役立つ便利なプロパティです。

  1. HTML DOM入力テキストのpatternプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text patternプロパティは、テキスト入力フィールドのpattern属性を設定または取得するために使用されます。このプロパティを利用することで、pattern属性に指定した正規表現に基づいて、ユーザーが入力したテキストが妥当な形式かどうかを自動的に検証できます。 構文 patternプロパティの基本構文は以下の通りです。 patternプロパティの設定： textObject.pattern = regexp ここで「regexp」は、テキストフィールドの入力値を検証するための正規表現です。正規表現を指定することで、特定の文字数や文字種（数字のみ、アルファ

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使