How to show the date and time the document was last modified with JavaScript?

Javascript Web Development Front End Technology

We use the lastModified property of the document object to show the date and time the document was last modified with JavaScript. This command will provide the exact date and time of modification. The document object, part of the DOM, renders the whole HTML as a hierarchy of objects and their properties as well as stores different attributes of the webpage.

document.lastModified

It is a read-only property of the document object that returns a string containing the date and time, the document was last modified. The format looks something this:

07/29/2019 15:19:41

Note − The lastModified property is useful only for webpages in which no content of the page is being generated dynamically going on.

Syntax

var lastModificationDate = document.lastModified;

We store the returned string from document.lastModified in the variable lastModificationDate.

Let’s look at an example to understand better.

Example 1

In the program below, we extract the last modified date and time of the document using document.lastModified and log it in the HTML body.


<!DOCTYPE html>
<html>
<body>
   <div id = "result"></div>
   <script>
      var date = document.lastModified;
      document.getElementById("result").innerHTML = "The document was last modified on : " + date;
   </script>
</body>
</html>

What counts as modification?

A Web server treats any file change as a source of modification and this information is derived from the HTTP headers of the request. The default date and time of 01/01/1971 12:00:00 is provided to the document if the web server fails to retrieve the modification information from HTTP headers.

JavaScript provides Date objects that are in sync with the web browser’s clock. It prints the date, time, and timezone in a more verbose way. e.g.

Tue Sep 06 2022 21:33:42 GMT+0530 (India Standard Time)

There are many ways a Date() object can be created. We will be using the Date() constructor in which we provide a string of date and time as an argument to retrieve the corresponding Date object.

Syntax

var lastModificationDate = new Date(document.lastModified);

We provide the lastModified property of the document which is a string, as an argument to the Date object. The corresponding Date object is then stored in lastModificationDate.

Example 2

In the program below, we extract the last modified date and time of the document using document.lastModified and create a Date object out of it which we then log in the HTML body.


<!DOCTYPE html>
<html>
<body>
   <div id = "result"></div>
   <script>
      var date = document.lastModified;
      var lastModifiedDate = new Date(date);
      document.getElementById("result").innerHTML = "The document was last modified on : " + lastModifiedDate;
   </script>
</body>
</html>

We can modify the HTML document by deleting an element. This changes the modification date of the document which is logged on the screen.

Syntax

parent.removeChild(child);

Here, the parent is the object that refers to an element whose child element we want to remove, and child is the object that needs to be removed.

However, there can be cases when we do not know the parent element. In that case we can use something like this −

child.parentNode.removeChild(child);

Where, child is the object of the child element that we want to delete. Note that parentNode is a js property to know the parent of an element.

Let’s understand this better with an example −

Example 3

In the code snippet below, we have two paragraphs in the document one of which is deleted when we press the change button. The modification date is then logged on the screen.


<!DOCTYPE html>
<html>
<body>
   <div id = "result">The modification date of this document can be changed with the below button !
      <p id = "para1"> This is the first paragraph. </p>
      <p id = "para2"> This is the second paragraph. </p>
   </div>
   <button onclick = "change()"> change !</button><br><br>
   <p id = "modificationDate">The document was last modified on :</p>
   <script>
      function change(){
         var dateDiv = document.getElementById("modificationDate");
         var resultDiv = document.getElementById("result");
         var para1 = document.getElementById("para1");
         resultDiv.removeChild(para1);
         var date = document.lastModified;
         dateDiv.innerHTML = date;
      }
   </script>
</body>
</html>

The change button triggers the change JavaScript function which deletes the first paragraph thus setting the modification time of the document to the time at which the button is pressed.

Conclusion

The lastModified property of document object is very helpful to get an idea of the last time the document was changed. However, the utility is limited to pages that are static, which are very few nowadays.