DOM
64 bites tagged DOM — interview questions with model answers, and 60-second explainers.
Web DOM elements vs React Native core components
View maps to UIView/ViewGroup, Text to native text, no HTML or CSS, all text must be inside Text. understanding RN renders to native views, not the DOM. claiming RN runs in a webview or uses real div and CSS.
Implement virtual scrolling for a large list in Vue
Tests DOM cost awareness and viewport culling. Strong answer: mount only visible nodes plus overscan, recycle DOM on scroll, and preserve total scroll height with a spacer. Red flag: suggesting pagination or naive v-for without keys.
Explain Svelte Action update and provide a reactive CSS example
Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.
How would you create a parameterized Svelte tooltip Action?
It tests your grasp of the Svelte Action lifecycle for reactive parameters. Answer: action takes node and parameter, returns update and destroy, bound as use:tooltip={text}. Using component events instead of the Action API, or omitting update, is a red flag.
What is a Svelte Action? Write a simple logging action.
Define a function receiving the node, log a message, and optionally return destroy. Whether you understand a Svelte action as a lifecycle function attached to a DOM node via use: and can write its minimal signature.
How would you build a reusable Svelte validation action?
Tests Svelte action lifecycles versus inline logic. Strong answers describe a node function that attaches input or blur listeners, toggles classes or ARIA directly, returns update and destroy, and cite reusability.
In Vue 3, what problem does Teleport solve?
This tests DOM hierarchy and CSS stacking context. A strong answer covers how Teleport moves markup to a target like body to escape ancestor transforms and z-index ceilings trapping fixed modals. Red flag: claiming it is only for cleaner HTML.
What's the difference between Angular property and attribute binding?
Tests whether you know Angular binds to DOM properties by default. [disabled] sets a DOM property; [attr.role] sets an HTML attribute. Use attribute binding when no DOM property exists, such as SVG attributes or role. Red flag: claiming they are equivalent.
How do you conditionally render Login/Logout with isLoggedIn in Vue or Angular?
This tests DOM lifecycle awareness versus CSS toggling. A strong answer uses v-if/*ngIf for infrequent changes that need cleanup, and v-show/[hidden] for frequent toggles that should stay mounted. A red flag is treating them as interchangeable.
Create a CustomEvent with typed detail and a type-safe listener
Tests TypeScript generics with DOM events. Strong answer: generic CustomEvent wrapper, typed detail, listener typed via generic param. Red flag: using any for detail or casting event.target instead of parameterizing the event type.
How do you programmatically play, pause, and dynamically set a video source?
Your grasp of HTMLMediaElement's imperative API and the play() Promise. Query the video, attach play() and pause() to buttons, and set src or swap source children then call load(). Treating play() as synchronous or changing src without load().
Write a generic TypeScript handler for mixed form inputs?
Tests TypeScript DOM narrowing. Strong answer: union-type ChangeEvent, narrow target with instanceof or tag checks, branch on element.type to read .checked for checkboxes or .value otherwise. Red flag: casting to any or assuming all inputs use .value.
Implement IntersectionObserver in TypeScript for lazy-loading images
Tests precise DOM typing and observer lifecycle. A strong answer types the callback as receiving IntersectionObserverEntry[], narrows entry.target to HTMLImageElement, swaps data-src to src, and calls unobserve.
How would you use DocumentFragment to optimize adding 1,000 list items?
Tests DOM reflow/repaint costs and off-DOM batching. A strong answer: create a DocumentFragment, build the 1,000 nodes off-DOM, then append once to trigger a single reflow. Red flag: claiming it saves memory or confusing it with innerHTML batching.
Programmatically create and append a div in TypeScript
Tests TypeScript DOM typing and safe element creation. Strong answers name HTMLDivElement and Document, use createElement plus classList.add and textContent, then append. Red flag: innerHTML for text or avoiding specific types.
How do you type-safely check an LI click and read data-id?
Tests TypeScript narrowing with DOM event delegation. A strong answer uses closest to walk up from event.target, checks result with instanceof HTMLLIElement, then reads dataset.id. Red flag: casting event.target directly without handling nested child elements.
Strategies to type querySelector results as HTMLInputElement
Tests whether you know safe ways to narrow querySelector's Element or null to HTMLInputElement. A strong answer compares type assertions with generic querySelector calls, and insists on null checks. Red flag: asserting without runtime validation.
What is the click event's type and how to reference the button?
Handler receives a MouseEvent. Use event.currentTarget for the attached button, since event.target may be a nested child. DOM event inheritance and currentTarget versus target.
What is getElementById's return type and the check needed for .value?
Tests strict null awareness: getElementById returns HTMLElement or null, so null-check first. Strong answers note HTMLElement lacks .value, requiring narrowing to HTMLInputElement. Red flag: assuming a valid element is always returned.
What are the key differences between NodeList and HTMLCollection?
Tests DOM snapshot vs live binding: querySelectorAll returns a static NodeList, getElementsByTagName returns a live HTMLCollection. Strong answers note childNodes is a live NodeList and warn against caching length during DOM mutation.
Explain DOM event capturing and bubbling with addEventListener
Tests DOM event propagation and addEventListener phase selection. Core: capture moves root-to-target, bubble moves target-to-root, useCapture or options.capture sets it. Red flag: saying events only bubble or confusing stopPropagation with preventDefault.
Describe the difference between DOMContentLoaded and window.load
This tests critical rendering path knowledge. DOMContentLoaded fires after HTML parsing and deferred scripts, while load waits for all subresources; use the former to bind UI early. Defaulting to load, which stalls interactivity until images finish.
How do you select by ID and class, and what is returned?
This tests basic DOM API knowledge and awareness of live collections. Use document.getElementById for IDs and document.getElementsByClassName for classes, which returns a live HTMLCollection. A red flag is calling the result a static Array or NodeList.
What is the fundamental difference between window and document?
Window is the browser tab and global scope; document is the object-oriented DOM representation of the loaded page. Your mental model of the browser runtime layers.
Get DOM bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.