DOM Manipulation | Notion

DOM Concepts

What is the DOM?

The Document Object Model (DOM) is a structured tree representation of a webpage.
JavaScript can access and modify DOM nodes to dynamically update the page.

`window` in the Browser

window is the global object that represents the browser window.
Contains browser-related properties and methods:
- window.document → The page's DOM.
- window.location.href → Gets or sets the current URL.
- window.localStorage / window.sessionStorage → Stores key-value pairs.
- window.innerWidth / window.innerHeight → Gets viewport dimensions.
- window.alert(message) → Displays an alert box.

Accessing window

window is global, so it's often omitted:

console.log(window.location.href);
console.log(location.href); // Same as above

`document` in the Browser

document is a property of window (window.document).
Represents the DOM (Document Object Model) of the loaded web page.
Common properties:
- document.title → Gets or sets the page title.
- document.body → Accesses the <body> element.
- document.documentElement → Accesses the <html> element.

Accessing document

Since document is also global, you can access it directly:

console.log(document.title); // Equivalent to `window.document.title`

Selecting Elements

document.getElementById(id) → Selects an element by its ID.
document.querySelector(selector) → Selects the first matching element.