HTML DOM Objects

Main DOM Objects

document.title
document.body
document.head

window.alert("Hello!")
window.location.href
window.innerWidth

navigator.userAgent
navigator.language
navigator.platform

location.href
location.hostname
location.pathname

🔹 Document Object Properties

The document object provides access to the HTML document:

// Basic document properties
console.log(document.title);           // Page title
console.log(document.URL);             // Full URL
console.log(document.domain);          // Domain name
console.log(document.lastModified);    // Last modified date
console.log(document.readyState);      // Loading state

// Document structure
console.log(document.doctype);         // DOCTYPE declaration
console.log(document.documentElement); //  element
console.log(document.head);            // 


 element
console.log(document.body);            //  element

// Document content
console.log(document.forms.length);    // Number of forms
console.log(document.images.length);   // Number of images
console.log(document.links.length);    // Number of links    

🔹 Window Object Properties

The window object represents the browser window:

// Window dimensions
console.log(window.innerWidth);    // Viewport width
console.log(window.innerHeight);   // Viewport height
console.log(window.outerWidth);    // Browser window width
console.log(window.outerHeight);   // Browser window height

// Screen information
console.log(window.screen.width);  // Screen width
console.log(window.screen.height); // Screen height

// Window methods
window.alert("Hello World!");      // Show alert dialog
window.confirm("Are you sure?");   // Show confirmation dialog
window.prompt("Enter your name:"); // Show input dialog

// Window navigation
window.open("https://example.com"); // Open new window
window.close();                     // Close current window
window.print();                     // Print page

🔹 Navigator Object

The navigator object contains information about the browser:

// Browser information
console.log(navigator.appName);        // Browser name
console.log(navigator.appVersion);     // Browser version
console.log(navigator.userAgent);      // User agent string
console.log(navigator.platform);       // Operating system
console.log(navigator.language);       // Browser language

// Browser capabilities
console.log(navigator.cookieEnabled);  // Cookies enabled?
console.log(navigator.onLine);         // Online status
console.log(navigator.javaEnabled());  // Java enabled?

// Geolocation (if available)
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
        console.log("Latitude: " + position.coords.latitude);
        console.log("Longitude: " + position.coords.longitude);
    });
}

🔹 Location Object

The location object contains information about the current URL:

// URL components
console.log(location.href);        // Full URL
console.log(location.protocol);    // Protocol (http: or https:)
console.log(location.hostname);    // Domain name
console.log(location.port);        // Port number
console.log(location.pathname);    // Path after domain
console.log(location.search);      // Query string
console.log(location.hash);        // Fragment identifier

// URL manipulation
location.assign("https://example.com");    // Navigate to URL
location.replace("https://example.com");   // Replace current page
location.reload();                         // Reload page

// Example with a sample URL: https://example.com:8080/page.html?name=john#section1
// location.href      → "https://example.com:8080/page.html?name=john#section1"
// location.protocol  → "https:"
// location.hostname  → "example.com"
// location.port      → "8080"
// location.pathname  → "/page.html"
// location.search    → "?name=john"
// location.hash      → "#section1"

🔹 History Object

The history object allows navigation through browser history:

// History navigation
console.log(history.length);       // Number of pages in history

// Navigate through history
history.back();                     // Go back one page
history.forward();                  // Go forward one page
history.go(-2);                     // Go back 2 pages
history.go(1);                      // Go forward 1 page

// Modern history API (HTML5)
history.pushState({page: 1}, "Title", "/page1");    // Add to history
history.replaceState({page: 2}, "Title", "/page2"); // Replace current

// Listen for history changes
window.addEventListener('popstate', function(event) {
    console.log('History changed:', event.state);
});

// Example usage
function navigateToPage(pageNumber) {
    history.pushState({page: pageNumber}, `Page ${pageNumber}`, `/page${pageNumber}`);
    // Update page content here
}