---
title: "JavaScript DOM and date-time function"
subject: "Web Technology"
chapter: 4
key: "semester_7/web_technology:javascript-dom-date-time"
source: https://www.bctengineer.com/q/semester_7/web_technology/javascript-dom-date-time
site: BCT Engineering
---

# JavaScript DOM and date-time function

Web Technology · Chapter 4: Client-side scripting

- Asked in: 2074 Chaitra, 2+3 marks
- Video: [How to display live date & time on web page using JavaScript | Complete Tutorial](https://www.youtube.com/watch?v=zjLE99YcinU) — Design Studio42 Official
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/javascript-dom-date-time
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-4

## Question

Explain JavaScript DOM model. Make use of JavaScript function to display the date and time in either HTML document or console.

## Short answer

The DOM is a tree of objects with window at the top and document containing all page elements. A JavaScript function using new Date(), getElementById().innerHTML, and console.log can display date and time in the page and console, updating with setInterval.

## Answer

#### JavaScript DOM model
The **DOM** represents the web page as a tree of objects. The top object is `window`, which contains `document` (the page), `location`, `history`, `navigator`. Under `document` are `html`, `head`, `body` and all elements, each a node object with properties (`innerHTML`, `style`, `id`) and methods (`appendChild`, `setAttribute`). JavaScript uses these objects to find elements (`getElementById`), change content and style, add or delete nodes and respond to events, so the page changes without reloading.

```text
window
  |-- document
  |     |-- html -- head, body -- elements -- text
  |-- location
  |-- history
```

#### Displaying date and time using JavaScript
The built-in `Date` object gives the current date and time.

```html
<!DOCTYPE html>
<html>
<head><title>Date and Time</title></head>
<body>
  <h3>Current date and time</h3>
  <p id="dt"></p>

  <script>
    function showTime() {
      var now = new Date();                       // current date and time
      var date = now.getFullYear() + "-" +
                 (now.getMonth() + 1) + "-" + now.getDate();
      var time = now.getHours() + ":" +
                 now.getMinutes() + ":" + now.getSeconds();
      // display in HTML document through DOM
      document.getElementById("dt").innerHTML = date + " " + time;
      // display in console
      console.log("Date: " + date + "  Time: " + time);
    }
    showTime();
    setInterval(showTime, 1000);   // update every second
  </script>
</body>
</html>
```
Here `getElementById("dt").innerHTML` writes into the DOM, and `console.log` writes to the browser console. `now.toLocaleString()` is a shorter way to get a formatted string.

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. How does the DOM represent a web page?
   A. As a compiled binary file the browser executes
   B. As a tree of objects with window at the top and document beneath it
   C. As a table of CSS rules applied to the page
   D. As a flat list of HTML tags with no hierarchy
   Answer: B. The DOM is a tree of objects; window contains document, location, history and navigator, and document contains html, head, body and all elements. (Key point: DOM tree)

2. Which built-in object is used to get the current date and time?
   A. Calendar
   B. Time
   C. Date
   D. Window
   Answer: C. The built-in Date object (new Date()) gives the current date and time. (Key point: Date object)

3. In the example, why is 1 added to now.getMonth()?
   A. getMonth() returns 0-11, so adding 1 gives the usual month number
   B. It converts the month to a string
   C. getMonth() returns the day of the month
   D. It avoids a syntax error in the script
   Answer: A. getMonth() is zero-based (January = 0), so 1 is added to display the normal month number. (Key point: Month offset)

4. How does the example make the displayed time update every second?
   A. The Date object updates the paragraph automatically
   B. Using document.write inside a loop
   C. setInterval(showTime, 1000) calls showTime repeatedly
   D. Reloading the page with location.reload() each second
   Answer: C. setInterval(showTime, 1000) re-runs showTime every 1000 ms, which rewrites innerHTML of the element with id dt. (Key point: Live update)

## Related in Web Technology

- [Document Object Model with HTML/JavaScript](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Adom-html-javascript) — Web Technology, chapter 4, asked 2×
- [JavaScript and significance of DOM](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Ajavascript-dom-significance) — Web Technology, chapter 4