HTML DOM Time 객체 완벽 가이드 – time 요소 생성과 dateTime 속성 활용

HTML DOM의 Time 객체는 HTML 문서 내의 <time> 요소를 나타냅니다. <time> 요소는 사용자에게는 읽기 쉬운 형태로 날짜와 시간을 보여주면서, 검색 엔진이나 브라우저 같은 기계가 해석할 수 있는 표준 형식의 값을 함께 제공할 수 있어 매우 유용합니다.

<time> 요소 생성하기

JavaScript의 createElement() 메서드를 사용하면 <time> 요소를 동적으로 생성할 수 있습니다.

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

위 코드로 생성된 timeObject는 다음과 같은 속성을 제공합니다.

속성	설명
dateTime	<time> 요소의 dateTime 속성 값을 설정하거나 반환합니다.

그럼 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>Notification : <strong>Examination Incoming!</strong>
            <time id="TimeDateTimeSelect" dateTime="2019-05-23T12:45Z">
            </label>
            <input type="button" onclick="getExamDate()" value="What's the Exam Date?">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var TimeDateTimeSelect = document.getElementById("TimeDateTimeSelect");
    function getExamDate() {
        divDisplay.textContent = 'Examination Date: '+TimeDateTimeSelect.dateTime;
    }
</script>
</body>
</html>

실행 결과

[What's the Exam Date?] 버튼을 클릭하기 전 −

HTML DOM Time 객체 완벽 가이드 – time 요소 생성과 dateTime 속성 활용

버튼을 클릭한 후 −

HTML DOM Time 객체 완벽 가이드 – time 요소 생성과 dateTime 속성 활용

이처럼 Time 객체의 dateTime 속성을 활용하면 <time> 요소에 담긴 날짜·시간 정보를 손쉽게 읽어오거나, 필요에 따라 새로운 값으로 변경할 수도 있습니다.