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

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

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

dateTime プロパティの構文

1. 値を取得する場合（文字列として返す）

timeObject.dateTime

2. 値を設定する場合

timeObject.dateTime = "YYYY-MM-DDThh:mm:ssTZD"

日時フォーマット（YYYY-MM-DDThh:mm:ssTZD）の各項目の意味

dateTime プロパティに設定できる値は、次の項目を組み合わせた ISO 8601 形式の文字列です。

項目説明
YYYY年を表します（例：1998）
MM月を表します（例：05 は5月）
DD日を表します（例：24）
T日付と時刻を区切るセパレーター（区切り文字）です
hh時間（時）を表します（例：12）
mm分を表します（例：48）
ss秒を表します（例：00）
TZDタイムゾーン指定子です。「Z」は UTC（協定世界時）、「+09:00」のようにオフセットで日本標準時などを示すこともできます

それでは、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"></time>
            </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 プロパティとは？取得・設定方法を実例付きで解説

「試験日はいつ？」ボタンをクリックした後の画面 −

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

サンプルコードの解説

ボタンをクリックすると、onclick イベントによって getExamDate() 関数が呼び出されます。関数内では getElementById() で取得した time 要素に対して dateTime プロパティを読み取り、その値（2019-05-23T12:45Z）が div 要素のテキストとして画面に表示される仕組みです。
このように dateTime プロパティを使えば、JavaScript から time 要素に埋め込まれた日時情報を簡単に取得・活用できます。


  1. HTML DOMのdel dateTimeプロパティとは？使い方とサンプルコードを徹底解説

    del dateTimeプロパティは、HTML DOMにおいて<del>要素に関連付けられたプロパティで、Webページ上のテキストがいつ削除されたのかをユーザーに伝えるために使用します。具体的には、テキストが削除された日付と時刻を「YYYY-MM-DDThh:mm:ssTZD」形式で取得・設定することができます。 del dateTimeプロパティの構文 dateTimeプロパティを設定する場合の基本的な構文は以下のとおりです。 delObject.dateTime = YYYY-MM-DDThh:mm:ssTZD 各値の意味は次のようになっています。 YYYY … 年（4桁）

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

    HTML DOM Timeオブジェクトとは？HTML DOMのTimeオブジェクトは、HTML5で導入された<time>要素をJavaScriptから操作するためのインターフェースです。<time>要素を活用することで、人間が読める形式の日付・時刻情報とともに、機械が解釈できる正確な時刻データをWebページに埋め込むことができます。<time>要素を作成するJavaScriptで新しい<time>要素を動的に生成するには、document.createElement()メソッドにTIMEを指定します。var timeObject = docume