DOM
Document Object Model
ELI5 — The Vibe Check
The DOM is a live map of your webpage that JavaScript can read and edit. When the browser loads your HTML it turns it into a big tree of objects. JavaScript can then grab any branch of that tree and change it — like editing a document while it's open.
Real Talk
The DOM is a programming interface for HTML and XML documents. It represents the document as a tree of nodes where each node is an object with properties and methods. JavaScript interacts with the DOM to dynamically read, modify, add, or remove elements and attributes.
Show Me The Code
// Get an element and change its text
const title = document.getElementById('title');
title.textContent = 'New Title';
title.style.color = 'red';
When You'll Hear This
"Directly manipulating the DOM is slow — that's why React uses a Virtual DOM." / "Inspect the DOM in DevTools to see what's actually rendered."
Related Terms
HTML (HyperText Markup Language)
HTML is like the skeleton of a webpage. You write tags like <h1> and <p> and the browser builds the bones of your site from them.
Hydration
Hydration is when a server-rendered HTML page comes alive in the browser.
JavaScript
JavaScript is what makes websites actually DO stuff. HTML is the bones, CSS is the skin, and JavaScript is the muscles and brain.
Render
Render is another developer-friendly hosting platform that does web services, databases, cron jobs, and static sites all in one place.
Virtual DOM
The Virtual DOM is a lightweight copy of the real DOM that lives in memory.