DOM and events interview guide

DOM mental model

The DOM is a tree of nodes the browser builds from HTML. Interview questions ask how you select nodes, walk parents/children, and update content without wrecking performance. Prefer querySelector / getElementById over brittle chains when the exam allows modern APIs.

Know textContent vs innerHTML (and why injecting untrusted HTML is dangerous). Distinguish element nodes from text nodes when questions talk about childNodes vs children.

Events that trip people up

Bubbling goes target → ancestors; capturing is the reverse. addEventListener’s third argument (or options.capture) enables capture. stopPropagation stops further travel; preventDefault cancels the browser’s default action (form submit, link navigation).

Event delegation attaches one listener to a parent and reads event.target — efficient for lists. Remember that some events do not bubble the way beginners expect; when unsure, eliminate options that confuse bubbling with capturing.

Drill it under a timer

frontendprep Frontend and JavaScript-flavored tips cover fetch, storage, and events. After a miss, redraw the bubble path once on paper. Timed practice forces you to recall phase and default-action vocabulary without looking them up.