What is the use of the document.lastModified property in DOM?

In this Answer, we'll learn the use of DOM's document.lastModified property. This property provides us with the date & time our HTML page was last modified. Developers use this property to get hold of the date and time their web page was last updated through user interactions.

Syntax

Here, document refers to the HTML page loaded into the browser.

Return value

This property returns a string representing the date and time at which a user's action modifies the HTML page.

Example

In the following example, we'll render some changes in the HTML page and retrieve different timestamps at which the changes are reflected using the document.lastModified property:

Explanation

The explanation that follows from the code widget above is given below:

• Lines 5–12: In this piece of code, we have a parent <div> tag that encapsulates the content of our web page. The tags that are significant in demonstrating the functionality of our property are described below:

  • Line 7: This line contains a <p> tag, which displays some text for now but will change as the reader clicks on the button present on line 8.

  • Line 8 and 10: These lines contain two <button> tags listening for the onclick event. They trigger the fetchTime() and fetchUpdTime() methods.

  • Line 9 and 10: Here, a placeholder <p> will display the time stamps to the reader, which are retrieved using the document.lastModified property.

• Lines 13–26: This code snippet encloses our JavaScript code using HTML <script> tags. The functions, fetchTime() and fetchUpdTime(), use the document.lastModified property in the following manner:

  • Line 15: This line is present in the body of the fetchTime() method. Here, we assign the return value of the document.lastModified property to the time variable.

  • Lines 16–17: Here, we fetch the <p> tags present on line 7 and line 9 of our HTML document using the document.getElementById() method.

  • Lines 18–19: After fetching, we use the innerHTML property to populate the <p> tag so that the reader can see the change.

• Lines 21–25: These lines of code form the body of our fetchUpdTime() method, which also uses the document.lastModified property to render the updated time stamp after the changes are reflected inside the document.

We can also see a subtle time difference between both the time stamps. So, the property returns the latest time at which the user makes the changes.

Note: To read more on document.getElementById() method and the innerHTML property, please refer to the following Answers:

• document.getElementById()

• innerHTML