What is the DOM, and how does JavaScript interact with it?

Short Interview Answer

The Document Object Model is a tree representation of the page that JS can query and mutate via browser APIs like `document.querySelector` and node methods.

Detailed Explanation

HTML is parsed into a tree of nodes (elements, text, comments). JavaScript uses DOM APIs to read/update structure, attributes, and content, which can trigger style recalculation, layout, and paint. The DOM is not the same as CSSOM or the render tree, but changes often affect them. Prefer efficient queries, batch mutations, and modern APIs (`querySelector`, `classList`, `append`) over outdated patterns.

Example

const el = document.querySelector('#app');
el.textContent = 'Hello';
el.classList.add('ready');

Interview Tip

Mention that frequent DOM thrashing hurts performance.

Common Mistake

Confusing the DOM tree with what you see painted pixel-for-pixel (render pipeline is more involved).