? JavaScript DOM Document

⚡ Quick Overview

In JavaScript, the document object represents the entire web page loaded in the browser. It is the main entry point to access and manipulate the HTML content, including elements like <head>, <body>, the page title, and URL-related information.

? Key Concepts

document is part of the Browser Object Model (BOM) and represents the current HTML document.
It allows you to read and modify page information such as the title, URL, and DOM tree.
document.body refers to the <body> element (main visible content).
document.head refers to the <head> element (meta-data, links, scripts).
document.documentElement usually refers to the root <html> element.
Some document properties are read-only (like document.URL and document.lastModified).

? Syntax and Properties

Commonly used document properties include:

document.title – Get or set the title of the document (browser tab text).
document.body – Returns the <body> element.
document.head – Returns the <head> element.
document.documentElement – Returns the root <html> element.
document.URL – Returns the complete URL of the page (read-only).
document.domain – Returns the domain name of the server.
document.lastModified – Returns the date and time the document was last modified.

? Use Cases

Dynamically updating the browser tab title based on the current page state.
Accessing and modifying the page structure using document.body and child elements.
Performing URL-based logic or debugging with document.URL and document.domain.
Logging the DOM tree to understand or inspect the current page structure.

? Code Examples

? View Basic Document Properties

console.log(document.title);            // Document's title
console.log(document.body);             // <body> element
console.log(document.documentElement);  // <html> element
console.log(document.URL);              // Full URL of the current page
console.log(document.lastModified);     // Last modified date/time

✏️ Change the Page Title

// Change the title of the page
document.title = "New Page Title";

? Access head and body Elements

console.log(document.head); // <head> element
console.log(document.body); // <body> element

? Live Output and Explanation

?️ What the Console Shows

document.title prints the current text shown on the browser tab.
document.body prints the whole <body> DOM tree.
document.documentElement prints the root <html> element.
document.URL prints the full URL of the current page (cannot be changed directly).
document.lastModified returns a string with the last modified date and time of the document.
Assigning to document.title immediately updates the browser tab text.

? Interactive Example

Use this mini tool to update the document title dynamically:

? New document title The current tab title is controlled by document.title.

? Tips and Best Practices

Use document.body and document.head to quickly access the main sections of the HTML document.
Update document.title to reflect the current state of your app or page (e.g., unread messages count).
Use document.URL or document.domain for URL-based logic or debugging, but remember they are often read-only.
Log document or its properties in the console to explore the DOM structure while learning.
Make sure the DOM is loaded (e.g., run code after <script> at the bottom or use DOMContentLoaded) before accessing elements inside document.body.

? Try It Yourself

Change the title of the current page using document.title = "Your Name's Page"; and observe the browser tab.
Log document.body and document.head to the console and inspect their contents in the DevTools.
Print the current URL and last modified date using console.log(document.URL) and console.log(document.lastModified).
Experiment with document.documentElement and see how it relates to the entire HTML document.