Skip to main content

DOM

  • Also called the DOM tree
  • Repaint

The document object is created by the browser for each new HTML page (document) viewed. JavaScript provides access to various properties and methods to manipulate the document.

The DOM is the API for HTML and XML documents. Nearly everything your app does interacts with the DOM, which represents the view of your app. https://overapi.com/html

3 Stages: Event Capture, Target, Bubbling

In JavaScript, the window and document objects are fundamental components of the browser's Document Object Model (DOM), playing crucial roles in web application development.

Window object: Represents the browser window or tab containing the web page. It serves as the global object in the browser's JavaScript environment.

  • Global Scope: All global variables, functions, and objects are attached to the window object.
  • Control over the Browser Window: Methods to manipulate the browser window, such as opening/closing windows, resizing, moving, or scrolling the window, and navigating to different URLs.
  • Timers and Events: Functions like setTimeout, setInterval, and addEventListener.
    • setTimeout: Runs a function once after a specified interval.
    • setInterval: Runs a function repeatedly with a specified interval between runs.
  • Communication between Windows: Methods like postMessage for communication between multiple windows or iframes.
  • Browser Information: Provides information about the browser and the user's screen.

Document object: Represents the HTML document loaded in the browser window, providing an interface to manipulate the document's content and structure.

  • DOM Manipulation: Access and modify elements within the HTML document.
  • Event Handling: Attach event handlers to elements within the document.
  • Dynamic Content: Modify the document's structure and content dynamically.
  • DOM Traversal: Navigate and traverse the DOM tree.
  • Form Handling: Access and manipulate HTML form elements.

Overall, the window and document objects are essential for web application development in JavaScript, providing capabilities for controlling the browser window, manipulating the document's content and structure, and interacting with the user.

window.onload vs document.onload​

  • window.onload: Fired when the entire page, including all dependent resources, has loaded.
  • document.onload: Fired when the DOM is ready, which can be prior to images and other external content loading.

Web API​

The Web API refers to all JavaScript methods and objects that allow developers to programmatically address and manipulate the browser. It consists of two parts: the Document Object Model (DOM) API and other methods and functions available only in the browser environment.

In addition to the DOM API, there are other APIs specific to the browser, such as:

  • File API: Methods and properties to read, write, and identify files in the browser, represented by Blob and File interfaces.
  • XMLHttpRequest: Methods and properties for asynchronous communication with a server over HTTP.
  • History API: Provides programmatic access to the browser's history, exposed as the history object on window.
  • Storage API: Includes sessionStorage and localStorage for managing temporary storage of small amounts of data in the browser.