HTML DOM del dateTime 속성 완벽 정리 – 사용법과 예제 코드

HTML DOM의 del dateTime 속성은 HTML <del> 요소와 함께 사용되며, 웹 페이지에서 특정 텍스트가 언제 삭제되었는지를 사용자에게 알려주는 역할을 합니다. 이 속성은 텍스트가 삭제된 날짜와 시간 정보를 담고 있어, 문서 수정 이력을 명확하게 표현할 수 있습니다.

del dateTime 속성이란?

<del> 요소는 문서에서 삭제된 텍스트를 나타낼 때 사용하며, 브라우저에서는 일반적으로 취소선(strikethrough) 형태로 표시됩니다. 이때 dateTime 속성을 함께 지정하면 해당 텍스트가 삭제된 정확한 시점을 기계가 읽을 수 있는(machine-readable) 형식으로 제공할 수 있습니다.

문법(Syntax)

dateTime 속성 설정하기

delObject.dateTime = YYYY-MM-DDThh:mm:ssTZD

각 구성 요소의 의미는 다음과 같습니다.

YYYY : 연도 (예: 2019)
MM : 월 (01~12)
DD : 일 (01~31)
T : 날짜와 시간을 구분하는 구분자 또는 공백
hh : 시 (00~23)
mm : 분 (00~59)
ss : 초 (00~59)
TZD : 시간대 표시자(Time Zone Designator), 예: Z(UTC) 또는 +09:00

예제 코드

다음은 del 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()">변경</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 속성 완벽 정리 – 사용법과 예제 코드

[변경] 버튼을 클릭한 후 −

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. 버튼 생성 및 이벤트 연결

다음으로 [변경] 버튼을 만들어, 사용자가 클릭하면 changeDate() 함수가 실행되도록 onclick 이벤트를 연결했습니다.

<button onclick="changeDate()">변경</button>

3. changeDate() 함수 동작

changeDate() 함수는 getElementById() 메서드로 <del> 요소에 접근하여 dateTime 속성 값을 "2019-06-27T10:20:02Z"로 변경합니다. 그런 다음 id가 "Sample"인 단락의 innerHTML 속성을 설정해 변경 사항을 화면에 출력합니다. "Sample" 단락에는 해당 id에 맞는 스타일이 적용되어 있기 때문에 표시되는 텍스트는 파란색으로 나타납니다.

function changeDate() {
    document.getElementById("Del1").dateTime = "2019-06-27T10:20:02Z";
    document.getElementById("Sample").innerHTML = "datetime 속성이 '2019-06-27T10:20:02Z'로 변경되었습니다.";
}

정리

HTML DOM의 del dateTime 속성은 삭제된 텍스트의 시점 정보를 자바스크립트로 읽거나 수정할 수 있게 해주는 유용한 기능입니다. 문서 개정 이력을 추적하거나 편집 기록을 시각적으로 관리해야 하는 웹 애플리케이션에서 활용도가 높습니다. ISO 8601 형식(YYYY-MM-DDThh:mm:ssTZD)을 준수해야 한다는 점만 기억하면 쉽게 사용할 수 있습니다.