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

HTML DOM Timeオブジェクトとは？dateTimeプロパティの使い方を解説

HTML DOM Timeオブジェクトとは？

HTML DOMのTimeオブジェクトは、HTML5で導入された<time>要素をJavaScriptから操作するためのインターフェースです。<time>要素を活用することで、人間が読める形式の日付・時刻情報とともに、機械が解釈できる正確な時刻データをWebページに埋め込むことができます。

<time>要素を作成する

JavaScriptで新しい<time>要素を動的に生成するには、document.createElement()メソッドに"TIME"を指定します。

var timeObject = document.createElement("TIME");

Timeオブジェクトのプロパティ一覧

生成したtimeObjectでは、以下のプロパティを利用できます。

プロパティ説明
dateTime<time>要素のdateTime属性の値を設定（set）または取得（return）します

dateTimeプロパティの実装例

ここでは、TimeオブジェクトのdateTimeプロパティを使った具体的な例を紹介します。次のサンプルコードでは、ボタンをクリックすると<time>要素に設定されているdateTime属性の値を読み取り、試験の日付として画面に表示します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<title>Time dateTime</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>Time-dateTime</legend>
            <label>お知らせ : <strong>試験が近づいています！</strong>
            <time id="TimeDateTimeSelect" dateTime="2019-05-23T12:45Z">
            </label>
            <input type="button" onclick="getExamDate()" value="試験日はいつ？">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var TimeDateTimeSelect = document.getElementById("TimeDateTimeSelect");
    function getExamDate() {
        divDisplay.textContent = '試験日： '+TimeDateTimeSelect.dateTime;
    }
</script>
</body>
</html>

実行結果

「試験日はいつ？」ボタンをクリックする前の画面は以下の通りです。

HTML DOM Timeオブジェクトとは？dateTimeプロパティの使い方を解説

「試験日はいつ？」ボタンをクリックした後、dateTime属性から取得した日付が画面に表示されます。

HTML DOM Timeオブジェクトとは？dateTimeプロパティの使い方を解説

まとめ

HTML DOMのTimeオブジェクトを使えば、<time>要素のdateTime属性を簡単に読み書きでき、日付や時刻に関連する情報を動的に操作することが可能になります。スケジュール管理やイベント告知など、時刻情報を扱うWebアプリケーション開発において、ぜひ活用してみてください。

  1. HTML DOM の Time 要素 dateTime プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Time オブジェクトが持つ dateTime プロパティは、HTML の <time> 要素に設定された datetime 属性の値を取得（読み取り）したり、新しい値を設定（書き込み）したりするために使用されます。 datetime 属性は画面上には表示されず、機械が判読できる形式（ISO 8601 形式）で日時を記録します。これにより、検索エンジンやカレンダーアプリなどがページ内の日付・時刻情報を正確に解釈できるようになります。 dateTime プロパティの構文 1. 値を取得する場合（文字列として返す） timeObject.dateTime

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注