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

HTML DOM ins dateTime プロパティの使い方を解説

HTML DOM の ins dateTime プロパティは、<ins> 要素によって挿入されたテキストの挿入日時(日付と時刻)を文字列として返します。ドキュメントの変更履歴を追跡・表示したい場合に役立つプロパティです。

構文

ins dateTime プロパティの構文は以下の通りです。

文字列値を返します。

insObject.dateTime

例

ins dateTime プロパティの具体的な使用例を見てみましょう。以下のサンプルコードでは、ボタンをクリックすると、<ins> 要素の datetime 属性に設定された値を「日付」と「時刻」に分割して画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>ins 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>ins-dateTime</legend>
<h1>Fact:</h1>
<p>Water cannot persist on moon's surface.
<ins id="newInfo" cite="https://www.example.com/water-ice-moon-surface-confirmed.html" datetime="2018-08-21T18:23Z">
Water ice found on moon.</ins>
</p>
<input type="button" onclick="getDate()" value="When was this change made?">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var insDateTime = document.getElementById("newInfo");
   function getDate() {
      divDisplay.textContent = 'Text inserted on '+insDateTime.dateTime.split("T")[0];
      divDisplay.textContent += ' at '+insDateTime.dateTime.split("T")[1];
   }
</script>
</body>
</html>

出力結果

このコードを実行すると、以下のような出力が得られます。

「When was this change made?」ボタンをクリックする前 −

HTML DOM ins dateTime プロパティの使い方を解説

「When was this change made?」ボタンをクリックした後 −

HTML DOM ins dateTime プロパティの使い方を解説

ポイント

datetime 属性の値は「YYYY-MM-DDThh:mm:ssTZD」という ISO 8601 形式で指定されます。上記の例では、日付と時刻を区切る「T」を基準に split() メソッドで文字列を分割することで、挿入日と挿入時刻をそれぞれ取り出して表示しています。このように ins dateTime プロパティを活用すれば、ドキュメント内のテキストがいつ追加・修正されたのかを動的に確認できるようになります。

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

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

  2. HTML DOM Video textTracksプロパティの使い方をわかりやすく解説

    HTML DOM の Video textTracks プロパティは、<video> 要素に関連付けられたテキストトラック（字幕やキャプションなど）の情報を格納した TextTrackList オブジェクトを返します。このプロパティを利用すると、JavaScript から動画に設定された字幕トラックの総数やラベル、言語などの情報を簡単に取得できます。 構文 textTracks プロパティの基本的な構文は以下の通りです。 mediaObject.textTracks 戻り値は TextTrackList オブジェクトであり、length プロパティでトラックの総数を取得したり、イン