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

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桁）
  • MM … 月
  • DD … 日
  • T … 日付と時刻を区切るセパレータ
  • hh … 時
  • mm … 分
  • ss … 秒
  • TZD … タイムゾーン指定子（例：Z や +09:00）

del dateTimeプロパティの使用例

ここでは、実際にdel dateTimeプロパティを使用して、datetime属性の値を変更するサンプルコードを見ていきましょう。

<!DOCTYPE html>
<html>
<head>
<title>del dateTimeプロパティの使用例</title>
<style>
    #Sample{color:blue};
</style>
</head>
<body>
<h2>del dateTimeプロパティの例</h2>
<p><del id="Del1" datetime="2019-02-22T05:10:22Z">このテキストは削除されました</del></p>
<p>下のボタンをクリックすると、上記の削除済みテキストのdatetime属性値が変更されます</p>
<button onclick="changeDate()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeDate() {
        document.getElementById("Del1").dateTime = "2019-06-27T10:20:02Z";
        document.getElementById("Sample").innerHTML = "datetime属性は '2019-06-27T10:20:02Z' に変更されました。";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

続いて、「CHANGE」ボタンをクリックすると、以下のように表示内容が変化します。

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

サンプルコードの解説

ここからは、上記サンプルコードの処理の流れを順番に見ていきます。

1. <del>要素の作成

まず、<p>要素の中にid「Del1」を持つ<del>要素を作成し、datetime属性に「2019-02-22T05:10:22Z」という初期値を設定しています。

<p><del id="Del1" datetime="2019-02-22T05:10:22Z">このテキストは削除されました</del></p>

2. ボタンの設置

次に、「CHANGE」というボタンを配置し、ユーザーがクリックしたときにchangeDate()関数が実行されるようにonclickイベントを設定しています。

<button onclick="changeDate()">CHANGE</button>

3. changeDate()関数による属性値の変更

changeDate()関数では、getElementById()メソッドを使って<del>要素を取得し、そのdateTimeプロパティの値を「2019-06-27T10:20:02Z」に書き換えています。

さらに、id「Sample」を持つ段落のinnerHTMLプロパティに表示用のテキストを設定することで、変更結果を画面に出力しています。この段落には、idに対応するCSSスタイルが適用されているため、テキストは青色で表示されます。

function changeDate() {
    document.getElementById("Del1").dateTime = "2019-06-27T10:20:02Z";
    document.getElementById("Sample").innerHTML = "datetime属性は '2019-06-27T10:20:02Z' に変更されました。";
}

このように、del dateTimeプロパティを利用すれば、JavaScriptから動的に削除日時を操作できるため、編集履歴の管理やコンテンツの更新情報の表示など、さまざまな場面で活用できます。

  1. HTML DOM del citeプロパティの使い方を徹底解説

    HTML DOMのdel citeプロパティは、HTMLの<del>要素に関連付けられたプロパティで、Webサイト上のテキストがなぜ削除されたのかをユーザーに伝えるために使用します。具体的には、削除された理由を説明するドキュメントのURLを指定することで、その情報を提供します。del citeプロパティには視覚的な表示はありませんが、スクリーンリーダーなどの支援技術にとって有用な情報となるため、Webサイトのアクセシビリティ向上に貢献します。このプロパティを使うことで、HTML <del>要素のcite属性の値を設定（set）または取得（return）できます。構文de

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

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