🌐🪟🌳Window, BOM, and DOM in JavaScript

In JavaScript, window, BOM (Browser Object Model), and DOM (Document Object Model) are distinct but related concepts, all playing a crucial role in web development. window object.

1️⃣ Big Picture (Hierarchy)

• 🪟 Window : The global container object in the browser that holds everything (BOM + DOM)
• 🌐 BOM (Browser Object Model) : The browser environment (history, location, navigator, screen…) → Represents the browser environment around the page.
• 🌳DOM (Document Object Model) : The structured representation of the webpage (HTML) → Represents the page content (HTML).

Hierarchy :

🪟Window
  ↳ 🌐BOM (browser features: navigator, screen, location, history, document)
  ↳ 🌳DOM (page structure, HTML content via document)

In summary, the window object is the top-level object in the browser environment. The BOM extends the window object to provide control over the browser itself, while the DOM is a subset of the BOM (accessed via window.document) that specifically deals with the content and structure of the web page.

Window → BOM + DOM

• Window 🪟 = The global container object.
• BOM 🌐 = Part of the Window, represents the browser environment (navigator, location, history, screen).
• DOM 🌳 = Also part of the Window, represents the web page content (document).

So the proper way to describe it is:
Window → BOM
Window → DOM

Interconnections Between Window, DOM & BOM

🔹 Window → The parent of everything.

🔹 BOM → Browser control system inside the Window.

🔹 DOM → Webpage structure inside the Window.

🔹 Both BOM and DOM are accessible via Window, but they serve different roles —
BOM for browser features 🧭, and DOM for page manipulation 🧱.

Understanding the difference between them is essential to becoming a skilled JavaScript developer.