DOM

The DOM in JavaScript

Understand the Document Object Model — the live, tree-structured in-memory representation of a web page that JavaScript reads and modifies.

DOM Manipulation in JavaScript

Learn how to select, create, modify, and remove DOM elements using JavaScript, and the key differences between the main selector APIs.

Virtual DOM and Reconciliation

Understand how React's Virtual DOM and reconciliation algorithm efficiently update the real browser DOM.

What Is the Virtual DOM?

The virtual DOM is an in-memory, lightweight JavaScript representation of the real DOM that frameworks like React use to compute the minimal set of changes nee…

What is the DOM?

The DOM (Document Object Model) is a tree-structured, in-memory representation of an HTML or XML document that browsers build from parsed markup, letting JavaS…

What Is the Difference Between Event Bubbling and Capturing?

Bubbling and capturing are the two opposite directions an event travels through the DOM tree: capturing fires the event from the root down to the target elemen…

What Is Event Delegation and Why Use It?

Event delegation is the pattern of attaching a single event listener to a common ancestor element instead of separate listeners on every individual child, rely…

useEffect vs useLayoutEffect: What Is the Difference?

useEffect runs its callback asynchronously after the browser has painted the updated DOM to the screen, while useLayoutEffect runs synchronously after DOM muta…

Controlled vs Uncontrolled Components: What Is the Difference?

A controlled component has its form value driven entirely by React state, with every keystroke updating state via onChange and the state value fed back into th…

What Are React Portals and When Do You Use Them?

A React portal lets a component render its children into a DOM node that lives outside the parent component tree in the actual document, while the component st…

What Is the Critical Rendering Path?

The critical rendering path is the sequence of steps a browser must complete — parsing HTML into a DOM, parsing CSS into a CSSOM, combining them into a render…

What Is List Virtualization and Why Use It?

List virtualization (or windowing) is a rendering technique that keeps only the small subset of list items currently visible within the scroll viewport mounted…

DOM vs Shadow DOM: What Is the Difference?

The regular DOM is the single, global tree of elements making up a page where any script or stylesheet can reach any node, while the shadow DOM attaches a sepa…

Repaint vs Reflow: How Do They Affect Rendering Performance?

Reflow (layout) recalculates the position and geometry of elements across the page and is expensive, while repaint only redraws pixels for visual changes like…

What Is requestAnimationFrame and When Should You Use It?

requestAnimationFrame schedules a callback to run right before the browser’s next repaint, synchronizing JavaScript-driven animation with the display’s refresh…

What Is the Intersection Observer API and Why Use It?

The Intersection Observer API lets you asynchronously detect when a target element enters or exits the viewport (or another ancestor element), without the expe…

What Is the Mutation Observer API and When Should You Use It?

The Mutation Observer API lets you asynchronously watch a DOM subtree for changes — child insertions/removals, attribute changes, or text content changes — and…

What Is the Resize Observer API and Why Is It Useful?

The Resize Observer API lets you asynchronously detect when an element’s content box (or border box) size actually changes, which is essential for responsive,…

What Is the Browser Rendering Pipeline?

The browser rendering pipeline is the sequence of steps — style, layout, paint, and composite — a browser runs to turn HTML, CSS, and DOM state into pixels on…

What Is Layout Thrashing and How Do You Avoid It?

Layout thrashing happens when JavaScript repeatedly interleaves DOM writes and reads that force layout, causing the browser to synchronously recalculate layout…

How Does the HTML5 Drag and Drop API Work?

The HTML5 Drag and Drop API lets any element with draggable="true" be picked up and moved via a sequence of drag events (dragstart, dragover, drop, and others)…

What Is the Web Animations API and How Does It Compare to CSS Animations?

The Web Animations API (WAAPI) is a JavaScript interface, exposed via element.animate(), that lets you define and control keyframe animations programmatically…

Canvas vs SVG: When Should You Use Each for Web Graphics?

Canvas is an immediate-mode, pixel-based bitmap you draw onto imperatively with JavaScript and which forgets every shape once drawn, while SVG is a retained-mo…