HTML DOM의 ins dateTime 속성은 문서에 삽입된 텍스트가 기록된 날짜와 시간을 반환합니다. 이 속성은 <ins> 요소의 datetime 특성에 설정된 값을 문자열(String) 형태로 읽어올 때 사용됩니다.
<ins> 태그는 문서에 새롭게 추가된 내용을 표시하는 데 활용되며, cite 특성과 함께 datetime 특성을 지정하면 해당 변경 사항이 언제 발생했는지 의미론적으로 명확하게 남길 수 있습니다.
구문
dateTime 속성의 기본 구문은 다음과 같습니다 -
반환 값: 문자열
insObject.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>
출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다 -
'변경은 언제 이루어졌나요?' 버튼을 클릭하기 전 -
버튼을 클릭한 후 -
참고 사항
dateTime 속성은 읽기 전용이며, <ins> 요소에 datetime 특성이 설정되어 있지 않으면 빈 문자열("")을 반환합니다. 위 예제에서는 ISO 8601 형식(datetime="2018-08-21T18:23Z")으로 저장된 값을 split("T") 메서드로 분리해, 날짜 부분(2018-08-21)과 시간 부분(18:23Z)을 각각 화면에 표시합니다.