# HTML DOM Examples: A Comprehensive Developer's Guide The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. By representing the HTML document as a structured group of nodes and objects, JavaScript can easily access and manipulate the page dynamically. This guide provides practical, real-world examples of how to interact with various HTML DOM objects using JavaScript. --- ## 1. The Document Object The `document` object represents your web page. It serves as the entry point to the DOM tree and allows you to query, modify, and output content. ### Core Examples #### Outputting Text and HTML You can write content directly to the HTML output stream. Note that using `document.write()` after an HTML document is fully loaded will overwrite the entire page. ```javascript // Output plain text document.write("Hello, World!"); // Output formatted HTML document.write("

This is a Heading

This is a paragraph.

"); ``` #### Querying Document Metadata and Properties You can retrieve information about the current document, such as its title, URL, domain, or cookies. ```javascript // Get the document title const pageTitle = document.title; console.log("Title:", pageTitle); // Get the full URL of the document const currentUrl = document.URL; console.log("URL:", currentUrl); // Get the domain of the server that loaded the document const domainName = document.domain; console.log("Domain:", domainName); // Get the last modified date and time of the document const lastModifiedDate = document.lastModified; console.log("Last Modified:", lastModifiedDate); // Get the referrer URL (the page that linked to this page) const referrerUrl = document.referrer; console.log("Referrer:", referrerUrl); // Get all cookie name/value pairs const allCookies = document.cookie; console.log("Cookies:", allCookies); ``` #### Accessing Collection Elements The `document` object provides collections to access specific elements like anchors, forms, images, and links. ```javascript // Get the number of anchors () in the document const anchorCount = document.anchors.length; // Get the innerHTML of the first anchor if (anchorCount > 0) { const firstAnchorHTML = document.anchors.innerHTML; } // Get the number of forms in the document const formCount = document.forms.length; // Get the name of the first form if (formCount > 0) { const firstFormName = document.forms.name; } // Get the number of images in the document const imageCount = document.images.length; // Get the ID of the first image if (imageCount > 0) { const firstImageId = document.images.id; } // Get the number of links () in the document const linkCount = document.links.length; // Get the ID of the first link if (linkCount > 0) { const firstLinkId = document.links.id; } ``` #### Selecting Elements Modern JavaScript provides several methods to select elements from the DOM. ```javascript // Select an element by its unique ID and get its innerHTML const elementContent = document.getElementById("myElementId").innerHTML; // Select elements by their name attribute and get the count const elementsByName = document.getElementsByName("gender").length; // Select elements by their tag name and get the count const paragraphCount = document.getElementsByTagName("p").length; ``` --- ## 2. The Anchor Object The Anchor object represents an HTML `` element. ```javascript const link = document.getElementById("myAnchor"); // Get and set the href attribute const currentHref = link.href; link.href = "https://www.youtip.co"; // Get and set the target attribute link.target = "_blank"; // Get and set the hreflang attribute link.hreflang = "en"; // Get the relationship (rel attribute) const relationship = link.rel; // Get the media type (type attribute) of the linked document const linkType = link.type; ``` --- ## 3. The Area Object The Area object represents an `` element inside an image map (`