What is the DOM?

The DOM (Document Object Model) is a live, in-memory representation of a web page, structured as a tree of objects. When a browser loads HTML, it builds the DOM, and JavaScript uses it to read and change the page — updating text, styles, and structure on the fly.

How It Works:

1. The browser parses HTML into a tree of nodes
2. Each element, attribute, and piece of text becomes a node
3. JavaScript can query, add, remove, or modify nodes
4. Changes to the DOM update what the user sees

Key Ideas:

• Nodes: Elements, text, and attributes in the tree
• Selectors: Find nodes with methods like querySelector
• Events: Respond to clicks, input, and more
• Manipulation: Create and update elements dynamically

Why It Matters:

The DOM is the bridge between static HTML and interactive pages. Frameworks like React work by efficiently deciding which parts of the DOM to update.

FAQ

Is the DOM the same as HTML?

No. HTML is the text you write; the DOM is the live object tree the browser builds from it. The DOM can change at runtime while the original HTML source stays the same.

What is the "virtual DOM"?

It's a lightweight copy of the DOM used by frameworks like React. They compute changes on the virtual DOM first, then apply only the minimal updates to the real DOM for performance.