Play Quiz
Light Mode

Document Object Model & Machine Coding Problems

Introduction To DOM
Node
Selecting Elements
Traversing Node
DOM Modification
Introduction to Events
Bubbling and capturing
Event Deligation
Drag and Drop
Form
Debouncing & Throttling
MCP1 - Accordion
MCP2 - Analog Clock
MCP3 - Carousel
MCP4 - Contact Form
MCP5 - Countdown Timer
MCP6 - Counter
MCP7 - Custom Dropdown
MCP8 - Data Board
MCP9 - Digital Clock
MCP10 - Drag-and-Drop
MCP11 - Generate Table
MCP12 - Grail Layout
MCP13 - Infinite Scroll
MCP14 - Installment Calculator
MCP15 - Like Button
MCP16 - List Filter
MCP17 - Modal Popup
MCP18 - Multi-Step Form
MCP19 - Navbar
MCP20 - Progress Bar
MCP21 - Signup Form
MCP22 - Star Rating
MCP23 - Stopwatch
MCP24 - Tabs
MCP25 - Temperature Calculator
MCP26 - Theme Mode
MCP27 - To-Do List
MCP28 - Traffic Lights
MCP29 - Tweet Box
MCP30 - Virtualized List
MCP31 - Weather App
Writer Avatar

Prakash Kumar

  • Introduction to the DOM
  • Why DOM?
  • Understanding Document Object
  • Common Properties of document
  • Document property example
Introduction to the DOM

The Document Object Model (DOM) is a programming interface that represents an HTML document as a tree structure. It allows JavaScript to dynamically interact with web pages by modifying elements, attributes, and content.

When JavaScript runs in a browser, the window object is created by default. The window object represents the browser window and serves as the global object for JavaScript execution. Inside the window, the document object is created, which represents the loaded web page (DOM). The document is a property ofwindow and can be accessed using window.document or simply document.

Below is a diagram for crystal-clear understanding.

Why DOM?
  • Represents the Structure of a Web Page: The DOM provides a structured representation of an HTML document, allowing developers to interact with and manipulate it dynamically.
  • Enables Dynamic Content Updates: Using JavaScript, we can modify elements, update text, and change styles without reloading the page.
  • Facilitates Event Handling: The DOM allows us to attach event listeners to elements, enabling interactive behavior like clicks, form submissions, and animations.
  • Acts as a Bridge Between HTML and JavaScript: JavaScript uses the DOM to access and modify HTML elements, making websites more functional and responsive.
  • Supports Asynchronous Operations: DOM manipulation helps in updating the UI dynamically when fetching data from APIs using AJAX or Fetch API.
  • Essential for Frontend Frameworks: Modern libraries like React, Vue, and Angular rely on virtual DOM concepts for efficient updates and rendering.
  • Improves User Experience: By enabling dynamic content changes and animations, the DOM makes web applications more interactive and engaging.
Understanding Document Object

The document object is the root of the DOM and provides methods to access and manipulate elements on the page.

Let's understand document object with example, so we have below html code snippet

<!DOCTYPE html>
<html>
  <head>
    <meta />
    <link />
    <title>Page Title</title>

  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Now if we console the document, it will show entire HTML Document

//index.js
// Accessing the DOM in JavaScript
console.log(document); // Logs the entire document object
console.log(typeof document); // output : object

Below is how it will look like in the Browser Console

As we you can see it's showing entire HTML Document in the browser console.

Note : I have run this html code by copying path. Not "Open with live server."

Understanding the DOM Tree

The DOM represents a web page as a hierarchical tree structure, where each element is a **node**.

<!DOCTYPE html>
<html>
  <head>
    <meta />
    <link />
    <title>Page Title</title>

  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Below how it will look like tree form

The structure above is translated into a **DOM tree** where:

  • <html> is the root node.
  • <head> and <body> are child nodes of <html>.
  • Text inside elements (e.g., "Hello, World!") is stored as **Text Nodes**.

Note : We will discuss about node in details in next article. So don't worry.

Common Properties of document
  • Basic Document Properties
    • document.title – Returns or sets the title of the document.
    • document.URL – Returns the full URL of the document.
    • document.domain – Returns the domain name of the document’s server.
    • document.referrer – Returns the URL of the page that linked to this document.
  • Forms & Input Handling
    • document.forms – Returns all form elements.
    • document.scripts – Returns all script elements.
    • document.cookie – Gets or sets cookies.
    • document.inputEncoding – Returns the document’s encoding format.
  • DOM Navigation Properties
    • document.documentElement – Returns the root <html> element.
    • document.head – Returns the <head> element.
    • document.body – Returns the <body> element.
  • Element Selection Properties
    • document.getElementById(id) – Returns an element with the given id.
    • document.getElementsByClassName(className) – Returns elements with the given class.
    • document.getElementsByTagName(tagName) – Returns elements with the given tag name.
    • document.querySelector(selector) – Returns the first element matching the selector.
    • document.querySelectorAll(selector) – Returns a static NodeList of all matching elements.
  • Content Modification Properties
    • document.createElement(tagName) – Creates a new HTML element.
    • document.createTextNode(text) – Creates a new text node.
    • document.write(text) – Writes text directly to the document (not recommended).
    • document.appendChild(node) – Appends a child node to a specified parent node.
  • Window & Screen Related
    • document.defaultView – Returns the window object.
    • document.designMode – Enables/disables document editing.
    • document.visibilityState – Returns "visible" or "hidden".
  • Document Metadata Properties
    • document.characterSet – Returns the character encoding (e.g., "UTF-8").
    • document.lastModified – Returns the last modified date of the document.
    • document.readyState – Indicates the document's loading state ("loading", "interactive", or "complete").
  • Event Handling Properties
    • document.addEventListener(event, callback) – Adds an event listener to the document.
    • document.removeEventListener(event, callback) – Removes an event listener from the document.
  • Other Miscellaneous Properties
    • document.doctype – Returns the `<!DOCTYPE>` declaration.
    • document.implementation – Returns an XML document object.
    • document.currentScript – Returns the currently running script.
Let's discuss some document properties; the rest will be covered in their respective topics.
  • document.title – Returns or sets the title of the document.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>My Page Title</title>
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>
    // Getting the document title
console.log(document.title); // Outputs: "My Page Title"

// Setting a new title
document.title = "New Title";
console.log(document.title); // Outputs: "New Title"

    This example demonstrates how document.title retrieves the title from the <title> tag in the head section, and how you can modify it dynamically.

  • document.URL – Returns the full URL of the document.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>URL Example</title>
  </head>
  <body>
    <p>This is a sample page.</p>
  </body>
</html>
    // Getting the current document URL
console.log(document.URL); 
// Example Output: "https://www.example.com/path/page.html"

    In this example, document.URL returns the complete URL of the current page, including the protocol, domain, and path.

  • document.domain – Returns the domain name of the document’s server.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Domain Example</title>
  </head>
  <body>
    <p>Check the domain name of this document.</p>
  </body>
</html>
    // Getting the domain of the current document
console.log(document.domain); 
// Example Output: "example.com"

    This example shows how document.domain retrieves the domain name where the document is hosted.

  • document.referrer – Returns the URL of the page that linked to this document.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Referrer Example</title>
  </head>
  <body>
    <p>This page displays the referrer URL in the console.</p>
    <script>
      console.log("Referrer:", document.referrer);
    </script>
  </body>
</html>
    // Getting the referrer URL
console.log("Referrer URL:", document.referrer); 
// Example Output: "https://www.previouspage.com" (if navigated from another page)

    The document.referrer property provides the URL of the previous page that directed the user to the current document. If the user arrives at the page through a link from another site, it will display that site's URL.

    When will document.referrer be empty?

    • When the user directly types the URL in the browser's address bar.
    • When the user accesses the page through a bookmark.
    • When the page is opened in a new tab without following a link.
    • When coming from a website that uses `noopener` or `noreferrer` in the link.

    For example, if a user directly types https://example.com into the browser, document.referrer will be an empty string.

  • document.scripts – Returns all script elements.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Scripts Example</title>
    <script src="script1.js"></script>
  </head>
  <body>
    <script src="script2.js"></script>
  </body>
</html>
    // Accessing all script elements
const scripts = document.scripts;
console.log(scripts);

    Here, document.scripts returns a collection of all <script> elements in the document, which can be useful for dynamically modifying or analyzing scripts loaded on the page.

  • document.cookie – Gets or sets cookies.

    Example:

    // Setting a cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";

// Getting the cookie string
console.log(document.cookie);

    In this example, document.cookie is used to set a cookie and then retrieve all cookies as a string. Note that handling cookies often requires parsing the cookie string.

  • document.inputEncoding – Returns the document’s encoding format.

    Example:

    // Getting the document's input encoding
console.log(document.inputEncoding); // Typically outputs "UTF-8"

    This property returns the character encoding used by the document (e.g., "UTF-8"). It is useful for ensuring correct text rendering and handling international characters.

  • document.documentElement – Returns the root <html> element.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Document Navigation Example</title>
  </head>
  <body>
    <h1>Welcome!</h1>
  </body>
</html>
    // Accessing the root <html> element
console.log(document.documentElement);
// Output: The <html> element with all its child nodes

    This example demonstrates how document.documentElement retrieves the entire HTML document element, which is the root element.

  • document.head – Returns the <head> element.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Head Element Example</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>Content Here</h1>
  </body>
</html>
    // Accessing the <head> element
console.log(document.head);
// Output: The <head> element with its child nodes

    In this example, document.head accesses the <head> section of the HTML document, where metadata, styles, and scripts are usually placed.

  • document.body – Returns the <body> element.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Body Element Example</title>
  </head>
  <body>
    <h1>Main Content</h1>
    <p>This is where the visible content of the page resides.</p>
  </body>
</html>
    // Accessing the <body> element
console.log(document.body);
// Output: The <body> element with its child nodes

    This example shows how document.body retrieves the <body> element, which contains all the content visible on the web page.

  • document.createElement(tagName) – Creates a new HTML element.

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Create Element Example</title>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
    // Create a new paragraph element
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph created dynamically.";

// Append the new paragraph to the container div
document.getElementById("container").appendChild(newParagraph);

    This example demonstrates how document.createElement() creates a new <p> element, which is then appended to an existing container.

  • document.createTextNode(text) – Creates a new text node.

    Example:

    // Create a text node
const textNode = document.createTextNode("This is a text node.");

// Append the text node to an existing element, e.g., the container div
document.getElementById("container").appendChild(textNode);

    In this example, document.createTextNode() is used to create a text node that is appended to an existing element.

  • document.write(text) – Writes text directly to the document (not recommended).

    Example:

    <!DOCTYPE html>
<html>
  <head>
    <title>Document.write Example</title>
  </head>
  <body>
    <!-- The following script uses document.write to add content -->
    <script>
      document.write("<h1>This content was added using document.write()</h1>");
    </script>
  </body>
</html>

    document.write() writes HTML or text directly into the document. This method is generally discouraged because it can overwrite the document if used after the page has loaded.

  • document.appendChild(node) – Appends a child node to a specified parent node.

    Example:

    // Create a new div element
const newDiv = document.createElement("div");
newDiv.textContent = "This div was added using appendChild.";

// Append the new div to the body element
document.body.appendChild(newDiv);

    This example shows how document.appendChild() adds a new <div> element as a child of the <body> element.

  • document.defaultView – Returns the window object.

    Example:

    // Accessing the window object via document.defaultView
console.log(document.defaultView); 
// Output: [object Window]

    This example shows that document.defaultView returns the window object, which represents the browser window.

  • document.designMode – Enables/disables document editing.

    Example:

    // Enable design mode to allow editing of the document
document.designMode = "on";
console.log(document.designMode); // Output: "on"

// To disable editing, set designMode to "off"
// document.designMode = "off";

    In this example, setting document.designMode to "on" makes the entire document editable directly in the browser.

  • document.visibilityState – Returns "visible" or "hidden".

    Example:

    // Check the current visibility state of the document
console.log(document.visibilityState); 
// Output: "visible" (if the page is currently visible)
// Output might be "hidden" if the page is in the background

    This example demonstrates how document.visibilityState indicates whether the page is currently visible to the user ("visible") or not ("hidden").

  • document.characterSet – Returns the character encoding (e.g., "UTF-8").

    Example:

    // Retrieve the character encoding of the document
console.log(document.characterSet);
// Expected output: "UTF-8" (or the encoding set for the document)

    This example shows how document.characterSet returns the character encoding used by the document, which is important for proper text rendering and internationalization.

  • document.lastModified – Returns the last modified date of the document.

    Example:

    // Retrieve the last modified date of the document
console.log(document.lastModified);
// Expected output: A string representing the last modified date (e.g., "04/27/2025 10:23:45")

    This example demonstrates how document.lastModified provides the date and time when the document was last updated, which can be useful for cache management or display purposes.

  • document.readyState – Indicates the document's loading state ("loading", "interactive", or "complete").

    Example:

    // Check the current loading state of the document
console.log(document.readyState);
// Expected output: "loading", "interactive", or "complete"

    This example shows how document.readyState reports the current loading state of the document. This property is useful for executing code at the appropriate time during page load.

  • document.addEventListener(event, callback) – Adds an event listener to the document.

    Example:

    // Adding an event listener for clicks on the document
document.addEventListener("click", function() {
    console.log("Document was clicked!");
});

    This example demonstrates how document.addEventListener() listens for a click event on the entire document. When a user clicks anywhere on the page, the callback function executes and logs a message.

  • document.removeEventListener(event, callback) – Removes an event listener from the document.

    Example:

    // Defining a callback function
function handleClick() {
    console.log("Document was clicked!");
}

// Adding the event listener
document.addEventListener("click", handleClick);

// Removing the event listener after 5 seconds
setTimeout(() => {
    document.removeEventListener("click", handleClick);
    console.log("Click event listener removed.");
}, 5000);

    In this example, we first add an event listener that logs a message when the document is clicked. After 5 seconds, document.removeEventListener() removes the event listener, preventing further click logs.

  • document.doctype – Returns the <!DOCTYPE> declaration.

    Example:

    // Access the document type
console.log(document.doctype);
// Expected output: An object representing the <!DOCTYPE> declaration

    This example shows how document.doctype retrieves the document's doctype, which defines the document type and version of HTML.

  • document.implementation – Returns an XML document object.

    Example:

    // Access the document implementation
console.log(document.implementation);
// Expected output: [object DOMImplementation]

    Here, document.implementation provides access to the DOMImplementation object, which can be used to create new documents or check for feature support.

  • document.currentScript – Returns the currently running script.

    Example:

    // Access the currently executing script
console.log(document.currentScript);
// Expected output: The <script> element that is currently running

    In this example, document.currentScript returns the <script> element that is currently executing. This is useful for dynamically determining script-related information.