DOM and BOM

---

What is DOM?

"Document Object Model"

DOM (Document Object Model) is a programming interface for HTML/XML documents, representing the document as a tree of nodes.

"The DOM is a programming interface that represents HTML documents as a tree of objects, allowing JavaScript to interact with and manipulate the document structure."

---

DOM Tree Structure

Hierarchical tree of nodes

Document
  └── html
      ├── head
      │   ├── title
      │   └── meta
      └── body
          ├── h1
          └── p

"The DOM represents documents as a hierarchical tree where each HTML element is a node with parent-child relationships."

---

DOM Manipulation

Select · Modify · Create · Remove

// Select
const element = document.getElementById("id");
const elements = document.querySelectorAll(".class");

// Modify
element.textContent = "New text";
element.style.color = "red";

// Create
const newDiv = document.createElement("div");

// Remove
element.remove();

"DOM manipulation includes selecting elements, modifying properties, creating new elements, and removing elements."

---

DOM Methods

Query · Modify · Traverse

Common methods:

• Query: getElementById, querySelector, querySelectorAll
• Modify: textContent, innerHTML, setAttribute
• Create: createElement, appendChild
• Remove: remove, removeChild
• Traverse: parentElement, children, nextSibling

"DOM provides methods for querying, modifying, creating, removing, and traversing elements."

---

What is BOM?

"Browser Object Model"

BOM (Browser Object Model) provides objects for interacting with the browser beyond the document.

"The BOM provides objects for interacting with browser features like windows, history, location, and navigator."

---

BOM Objects

window · location · history · navigator · screen

Object	Purpose
window	Browser window, global object
location	Current URL, navigation
history	Browser history
navigator	Browser information
screen	Screen properties

"BOM objects include window (global), location (URL), history (navigation), navigator (browser info), and screen (display)."

---

Window Object

Global object, represents browser window

// Window properties
window.innerWidth; // Viewport width
window.innerHeight; // Viewport height

// Window methods
window.open(); // Open new window
window.close(); // Close window
window.alert(); // Alert dialog

"The window object is the global object representing the browser window, providing properties and methods for window management."

---

Location Object

Current URL and navigation

location.href; // Full URL
location.pathname; // Path
location.search; // Query string
location.hash; // Hash

// Navigation
location.reload(); // Reload page
location.assign("url"); // Navigate
location.replace("url"); // Replace (no history)

"The location object provides information about the current URL and methods for navigation."

---

History Object

Browser history navigation

history.back(); // Go back
history.forward(); // Go forward
history.go(-2); // Go back 2 pages
history.pushState(); // Add to history
history.replaceState(); // Replace history entry

"The history object allows programmatic navigation through browser history."

---

Navigator Object

Browser and system information

navigator.userAgent; // Browser user agent
navigator.language; // Browser language
navigator.onLine; // Online status
navigator.geolocation; // Geolocation API

"The navigator object provides information about the browser and system capabilities."

---

DOM vs BOM

DOM = document, BOM = browser

Aspect	DOM	BOM
Scope	Document structure	Browser features
Standard	W3C standard	Browser-specific
Objects	document, elements	window, location, history
Purpose	Manipulate HTML	Interact with browser

"DOM is standardized for document manipulation, BOM is browser-specific for browser features."

---

"The DOM represents HTML documents as a tree of nodes, providing methods to select, modify, create, and remove elements. The BOM provides browser objects like window (global), location (URL), history (navigation), and navigator (browser info). DOM is standardized, BOM is browser-specific. Together they enable full browser and document interaction."

---

🧠 Ultra-Short Cheat Sheet

DOM = document structure
BOM = browser features
DOM: query, modify, create, remove
BOM: window, location, history, navigator
DOM = standard, BOM = browser-specific