DOM
64 bites tagged DOM — interview questions with model answers, and 60-second explainers.
Explain list virtualization and when it beats React.memo
This tests whether you know React.memo skips re-renders but leaves off-screen nodes in the DOM. A strong answer describes virtualization mounting only visible items to cut memory use. A red flag is claiming memoization fixes jank or saves memory for big lists.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint. React commit phase and paint timing. Using it for data fetching or ignoring its blocking cost.
What is a React Fragment and why use it over a div?
This tests JSX semantics and DOM hygiene. A strong answer says Fragments group children without wrapper nodes, preventing extra DOM and invalid HTML like divs in tables. A red flag is citing performance without mentioning DOM structure or semantics.
Build a dynamic table of contents from article h2 tags
Query h2s with querySelectorAll, assign ids, map to anchor links, append a nav list. Basic DOM querying and dynamic element creation in vanilla JS. Importing jQuery or a framework for a six-line native task.
How would you track clicks on headlines and calls-to-action?
This tests DOM event handling and basic telemetry design. A strong answer covers event delegation with addEventListener, data attributes for element IDs, and a payload with timestamp and page context.
<ng-container>: Group Elements Without a DOM Footprint
<ng-container> is an Angular grouping element that doesn't render to the DOM. Use it to apply a structural directive like *ngIf to multiple elements without adding an extra <div> that could break your layout.
Angular Template Reference Variables: A #handle for Elements
A template reference variable is a handle to a DOM element or component within your template. Use the `#varName` syntax to grab an input's value or call a child component's method. Its scope is limited to the template where it's defined.
Vue Custom Directives: For Low-Level DOM Access
Vue custom directives are for low-level DOM access. Use them for tasks like auto-focusing a dynamically inserted input. The footgun is using them for stateful logic or UI structure, where a composable or component is the right tool.
Svelte Actions: Reusable DOM Logic
Svelte Actions let you run code when an element is mounted for direct DOM access. Use them to integrate third-party libraries or add custom events like swipe gestures.
Shadow DOM: Encapsulating Styles and Structure
Shadow DOM walls off a component's HTML and CSS from the rest of the page. Like a browser's `<video>` player, its internal controls are isolated, preventing your site's CSS from breaking them.
Vue Template Refs: Reaching Past the Virtual DOM
Vue template refs give you a direct handle to a DOM element, bypassing the declarative model. This is for tasks like programmatically focusing an input or initializing a 3rd-party library. The main footgun: the ref is `null` until the component has mounted.
*ngFor trackBy: Smarter DOM Updates in Angular
*ngFor's `trackBy` tells Angular how to uniquely identify items in a list. This prevents it from destroying and recreating the entire list in the DOM on every data update, instead allowing it to reuse existing elements.
currentTarget vs. target: Who's Listening vs. Who Shouted
event.currentTarget is the element listening for an event, while event.target is the element that triggered it. This is vital for event delegation patterns. Be careful: currentTarget is only valid inside the handler and becomes null afterward.
Typing NodeList vs. HTMLCollection in TypeScript
NodeList can contain any node (elements, text, comments), while HTMLCollection only holds elements. TypeScript forces you to handle this. Use querySelectorAll for a NodeList, or getElementsByTagName for an HTMLCollection.
Strongly-Typed Event Listeners in TypeScript
TypeScript turns `addEventListener`'s magic strings into a compile-time checked dictionary. It knows a button has a "click" event, preventing typos and inferring the event object's type.
The DOM's Inheritance Chain: EventTarget > Node > Element
Every HTML element is a stack of types: an EventTarget for events, a Node for tree structure, and an Element for common attributes. This lets you write type-safe DOM code, knowing a `div` has properties from all its ancestors.
Accessing data-* Attributes with `dataset`
The `dataset` property is a live map of an element's `data-*` attributes. It automatically converts HTML `data-user-id` to `element.dataset.userId` in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.
Type-Safe DOM Selection in TypeScript
TypeScript knows DOM types but can't guarantee an element exists. Selecting an element returns `Type | null`, forcing you to handle the `null` case. This prevents runtime errors when your script runs before the DOM element loads.
Event Bubbling vs. Capturing: The DOM's Two-Way Street
An event fired on a nested element travels in two phases: first down from the root (capturing), then back up (bubbling). This is how all DOM events work, like clicks.
DOM Traversal: Navigating the HTML Tree
DOM traversal is navigating a family tree of HTML nodes. You move between elements using properties like `parentNode` and `nextSibling`. This is key for finding elements relative to a known start point.
DOM Manipulation: Treating Your Webpage Like a Live Object
The DOM is a live tree of your webpage's HTML. DOM manipulation is how JavaScript changes that tree—adding, removing, or updating elements. This is key for all interactive web development. The footgun: direct, frequent manipulation is slow.
The DOM: Your HTML as a Live Object Tree
The DOM is the browser's live model of a webpage, represented as a tree of objects. JavaScript uses it to find elements, change content, and react to clicks. The footgun: DOM changes are in-memory; they don't edit the original HTML file on the server.
The `document` Object: Your Page's API
The `document` object is the root of the DOM tree, representing the entire webpage in your script. Use it to find elements (`getElementById`), create new ones (`createElement`), or read page info. The main footgun: accessing an element before it's been parsed.
The `window` Object: Your Browser's Global Scope
Think of the `window` object as the global stage for your JavaScript. It represents the browser tab and holds all global variables and APIs like `fetch` and `setTimeout`. You use it constantly, often implicitly.
Get DOM bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.