Dom interview questions

Implement get/set/remove over document.cookie, handling encoding and expiry.

Build a button that copies text to the clipboard and shows a transient copied confirmation.

Build a counter component that increments a displayed number each time a button is clicked.

Implement a deep clone of a DOM node and its subtree (element, text, and attributes) without cloneNode.

Implement a function that returns the height (max depth) of a DOM element's subtree.

Implement a delegated event listener that matches events bubbling up from descendants against a selector.

Build a list of FAQ questions that each expand to reveal an answer on click.

Implement a function that builds a unique CSS selector path from the root to a given element.

Implement a function returning the set of distinct tag names used in a DOM subtree, in document order.

Implement a jQuery-style helper that gets or sets inline CSS properties on a DOM element.

Implement a function that finds the element immediately to the right of a target at the same tree depth.

Build a toast that appears on trigger and auto-dismisses after a few seconds, with manual close.

Build a tooltip that shows on hover/focus of a trigger and hides on leave/blur.

Implement a breadth-first traversal of a DOM tree, returning elements level by level.

Implement a hook that fires a callback whenever the user clicks anywhere in the window, cleaning up on unmount.

Implement a hook returning the last copied text and an async copy function built on the Clipboard API.

Implement a hook that sets document.title and restores the previous title when the component unmounts.

Implement a hook that swaps the page favicon imperatively to a given URL.

Implement a hook that exposes a ref plus a function to focus the attached element on demand.

Implement a hook that reports whether a referenced element is currently being hovered.

Implement a hook that returns the current window width and height, updating on resize.

Build a carousel that auto-advances, wraps, pauses on hover or focus, and supports manual controls.

Implement a function that locates the node in a mirrored DOM tree occupying the same path as a given node.

Implement Element.matches: test whether an element satisfies a compound CSS selector (tag, id, class, attribute).

Build a jQuery-style wrapper whose methods return this so calls like addClass().text() chain.

Implement a state machine from a config of states and transitions, with send, guards, and entry actions.

Serialize a form's fields into a nested object, handling checkboxes, multi-selects, and bracket names.

Implement a function that returns all DOM elements containing every one of the specified class names.

Implement a function that returns all DOM elements whose computed style matches a given property and value.

Implement a function that walks a DOM tree and returns every descendant element matching a given tag name.

Build a client-side router over location.hash with route params and a change subscription.

Build a contribution-style heatmap calendar that colors each day cell by its activity value.

Build a client-side router over the History API (pushState/popstate) with path params.

Implement a simplified HTML sanitizer that strips out unsafe tags and attributes from a given DOM tree.

Implement a function that recursively compares two DOM trees and returns whether they are structurally equal.

Implement a scroll/resize-driven fallback that reports when observed elements enter the viewport.

Implement chainable addClass, removeClass, toggleClass, and hasClass helpers on a DOM element wrapper.

Resolve a dotted path with array indices and a wildcard against a nested object, returning matches.

Implement the jsx() factory (type, props, children) that a JSX transform compiles to.

Swap each image's data-src into src as it nears the viewport, using an IntersectionObserver.

Implement a fixed-capacity least-recently-used cache with O(1) get and put via a map plus a linked list.

Parse a subset of Markdown (headings, bold, italics, links, code) into an HTML string.

Implement a string template engine with {{ variable }} interpolation and nested-path lookup.

Build a mini MutationObserver that diffs a subtree on demand and reports added and removed nodes.

Implement a registry that associates values with DOM nodes without leaking memory once nodes are gone.

Build a notification center with an unread badge, mark-as-read, and dismiss.

Build a tiny state store with getState, setState, and subscribe that notifies listeners on change.

Build a one-time-code input of separate boxes with auto-advance, backspace, and paste handling.

Build a pixel art editor where you pick a color from a palette and paint individual cells on a grid canvas.

Implement a React Portal that owns a body host or borrows a caller-provided container with safe cleanup.

Implement an event bus whose subscriptions support wildcard segments matching any single topic level.

Implement querySelectorAll for descendant-combinator selectors, returning matches in document order.

Build a polling-based ResizeObserver that reports elements whose content-box size has changed.

Implement an html tagged-template function that interpolates values safely into a DOM fragment.

Wire an input and a model object so edits to either side stay in sync via events and a setter.

Implement a hook that warns before leaving a page while unsaved work exists.

Implement a hook that returns the active responsive breakpoint name derived from the current window width.

Implement a hook that opens a named BroadcastChannel, delivers messages to the latest callback, posts data, and closes cleanly.

Implement a hook that fires a callback when a pointer event lands outside a referenced element.

Implement a hook that tracks the system dark-color-scheme preference through matchMedia and updates when it changes.

Implement a hook that turns any element into a drop zone for files, text, and links, tracking drag-over state.

Implement a hook that tracks an element's size and position, staying correct across scroll, resize, and content changes.

Implement a hook that attaches and cleans up a browser event listener on a target element or window.

Implement a hook that traps keyboard focus inside a container while it is active and restores it on release.

Implement a hook that reports whether keyboard focus is anywhere inside a container, without flickering as focus moves between children.

Implement a hook that enters, exits, and tracks fullscreen mode for a referenced element through the Fullscreen API.

Implement a hook wrapping the Geolocation API to expose position, error, and loading state.

Implement a hook that binds a shortcut like ctrl+k, matching modifiers exactly and ignoring typing in inputs.

Implement a hook that tracks an image's loading, loaded, and error state, handling images already in cache.

Implement a hook that reports whether a ref'd element is intersecting the viewport via IntersectionObserver.

Implement a hook that freezes page scrolling while a modal or drawer is open, coordinating nested locks.

Implement a hook that fires a callback after a pointer is held down past a delay, cancelling on early release or move.

Implement a hook that returns whether a media query currently matches and updates on changes.

Implement a hook that reports online/offline status and connection info from the Network Information API.

Implement a hook that tracks notification permission and safely requests and displays browser notifications.

Implement a hook that reports the screen orientation type and angle and updates when the Screen Orientation API changes.

Implement a hook that reports whether the document is visible or hidden and updates on visibilitychange.

Implement a hook that queries a browser permission, tracks changes, and handles unsupported or failed queries.

Implement a hook that reports the browser's primary preferred language and updates when the preference changes.

Implement a hook that tracks the system reduced-motion accessibility preference through matchMedia and updates when it changes.

Implement a hook that gives a widget arrow-key navigation, keeping exactly one item in the tab order at a time.

Implement a hook that injects an external script tag and reports its loading status, deduping repeated sources.

Implement a hook that reports whether the user is scrolling up or down, ignoring jitter below a threshold.

Implement a hook that tracks the window scroll x/y position with a passive listener, throttled with rAF.

Implement a hook that detects swipe gestures on an element, reporting direction once a drag passes a threshold.

Implement a React hook that grows and shrinks a textarea to fit its content as the user types.

Implement a hook that reports the user's current text selection as live, plain state, updating as the selection changes.

Implement a hook that detects the Vibration API and exposes stable methods to start a pattern or cancel it.

Implement a hook that requests, releases, and tracks a screen wake lock, including browser-initiated release.

Implement a hook that detects Web Share support, validates share data when possible, and invokes the native share sheet.

Implement a diff that patches real DOM from an old vnode tree to a new one, minimizing changes.

Implement createElement to build a virtual DOM tree and render to turn it into real DOM nodes.

Build an emitter whose emit awaits async listeners, with once, off, and serial or parallel dispatch.

Reorder a list by pointer drag, computing the target index from the cursor over item midpoints.

Build a Gantt chart that renders tasks as bars positioned across a timeline by start and duration.

Implement a function that finds all DOM elements matching an ancestor-to-descendant tag-name hierarchy.

Tokenize an HTML string and build a nested node tree, handling attributes, void, and nested tags.

Run a queue of tasks in time-sliced batches, yielding between slices to keep the frame responsive.

Build an image cropper with a draggable, resizable crop region over an image.

Reconcile two keyed child lists into a minimal set of DOM inserts, moves, and removals.

Implement a function that finds the deepest common ancestor whose hiding would conceal every target element.

Build reactive state with a Proxy that tracks reads and re-runs registered effects on write.

Build a contenteditable rich-text editor with bold/italic/list formatting and a live toolbar state.

Build a grid where you click and drag across cells to select a rectangular range of them.

Build a grid of cells with formula evaluation and dependent-cell recalculation.

Implement a function that walks an HTML document's headings and builds a nested table of contents.

Implement a function that gathers the text content lying between two DOM nodes in document order.

Compute a tooltip's position around an anchor, flipping and shifting to stay inside the viewport.

Implement a pointer-based drag hook that tracks an element's x/y offset with start/move/end handlers.

Implement a hook that loads more pages when a sentinel element scrolls into view, guarding against duplicate loads.

Implement a hook that reports a ref'd element's content-box size via ResizeObserver.

Implement a windowing hook that renders only the visible rows of a long list, with correct spacer offsets.

Compute the visible slice and spacer offsets to render only on-screen rows of a huge list.

Build a windowed list that renders only the visible rows of a large dataset for smooth scrolling.