Question 1

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

Accepted 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. 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.

Question 2

Explain capturing, targeting, and bubbling in DOM event propagation.

Accepted Answer

Events can descend from root to target (capture), hit the target, then ascend (bubble). Listeners choose phase via addEventListener options. By default most listeners run on the bubble phase. Setting { capture: true } listens on the way down. stopPropagation prevents further phase travel; stopImmediatePropagation also blocks other listeners on the same node. event.target is the originating element; event.currentTarget is the element with the listener. Understanding phases is essential for delegation and overlay/modal click handling.

Question 3

What is event delegation and when should you use it?

Accepted Answer

Attach one listener to a common ancestor and use event.target to handle children — efficient for many dynamic elements. Instead of binding N listeners to N rows, bind one on the table/list and switch on closest matching selector. Benefits: less memory, works for elements added later, simpler teardown. Caveats: some events don't bubble (historically focus — use capture/focusin), and checks must be careful with nested interactive elements. Delegation is standard for large lists and component roots.

Question 4

What is the difference between reflow (layout) and repaint, and how can JS trigger them inefficiently?

Accepted Answer

Reflow recalculates geometry; repaint updates pixels without necessarily reflowing. Reading layout then writing styles in loops causes thrashing. Changing geometry-affecting properties (width, height, top, font sizes) can invalidate layout. Color/visibility changes may repaint without full layout. A common anti-pattern: alternate offsetHeight reads with style writes in a loop, forcing synchronous reflow each iteration. Batch reads then writes, use transform/opacity for animations where possible (compositor-friendly), and prefer class toggles over many inline styles. Virtualization reduces DOM size, cutting layout costs.

Question 5

When would you manipulate the DOM directly vs using a virtual DOM / declarative UI framework?

Accepted Answer

Direct DOM suits small widgets and precise control; declarative frameworks scale complex stateful UIs with predictable updates at the cost of abstraction. Direct DOM is fine for progressive enhancement, embeds, and performance-critical tiny interactions. As UI state grows, manual DOM sync becomes error-prone (bugs, XSS via innerHTML, inconsistent updates). Frameworks reconcile state to UI, handle batching, and provide components. Trade-offs: bundle size, learning curve, escaping hatch needs (ref). Lead/senior answers discuss islands architecture, migrating legacy jQuery incrementally, and measuring whether VDOM overhead matters for the use case.

Question 6

How should dynamic DOM updates be designed for accessibility (focus, live regions, semantics)?

Accepted Answer

Preserve semantics, manage focus on view changes, announce updates via ARIA live regions carefully, and ensure keyboard operability. When replacing views, move focus to a sensible heading/container so keyboard/AT users aren't stranded. Use semantic elements over div soup. For async status, aria-live politeness levels announce without stealing focus. Avoid aggressive live region spam. Keep focus traps correct in modals (inert/focus-trap) and restore focus on close. Ensure custom widgets implement keyboard patterns (ARIA Authoring Practices). Test with keyboard and screen readers, not only visuals. This is increasingly a senior frontend interview topic.

DOM JavaScript Interview Questions

Other JavaScript interview topics