Side by side

DOMvsVirtual DOM

What is the difference between the DOM and the virtual DOM?

Updated September 30, 20262 min read6 differences

In short

The DOM is the browser's live tree of page elements, while the virtual DOM is a light JavaScript copy that frameworks compare to decide what to change.

Web Developmentp. 13

DOM

Document Object Model

The DOM is the browser's in-memory tree of objects representing a web page, which JavaScript can read and change to update what the user sees.

Read the page on DOM

Web Developmentp. 53

Virtual DOM

The virtual DOM is a lightweight copy of a page's element tree kept in JavaScript memory, which UI libraries compare to update the real DOM efficiently.

Read the page on Virtual DOM

DOM and Virtual DOM compared

Aspect	DOM	Virtual DOM
What it is	The browser's live tree of elements on the page	A JavaScript object tree describing the desired UI
Provided by	The browser, through standard web APIs	A UI library or framework, such as React
How you update it	Direct calls like `appendChild` or setting `textContent`	Re-render, diff against the old tree, then patch the DOM
Cost of a change	Can trigger layout and repaint in the browser	Cheap to create; cost comes from diffing and final patches
Visible on screen	Yes, it is what the browser renders	No, it exists only in memory
Coding style	Imperative: you say how to change the page	Declarative: you say what the page should look like

The difference, explained

The DOM (Document Object Model) is the tree of objects the browser builds from HTML, and changing it changes what appears on screen. The virtual DOM is a plain JavaScript representation of that tree, used by libraries such as React, where you describe the desired interface as objects instead of editing the page directly.

The virtual DOM exists to make UI code simpler, not to replace the DOM. When state changes, the library renders a new virtual tree, compares it with the previous one in a step called diffing or reconciliation, and applies only the necessary updates to the real DOM. You write what the page should look like, and the library works out how to change it.

The two always work together: the virtual DOM is only a plan, and the real DOM is still what the browser paints. Not every framework uses one; some compile components into code that updates the exact DOM nodes directly, or track fine-grained reactive values so no diffing is needed.

A common misconception is that the virtual DOM is faster than the DOM. Diffing is extra work on top of the real updates, so careful hand-written DOM code can be faster; the real benefit is getting predictable, reasonably fast updates without that manual effort.

Which one should you use?

Choose DOM when…

The page is small and needs only a few targeted updates.
You are writing a lightweight widget or script without a framework.
You need exact control over performance-critical updates.

Choose Virtual DOM when…

The interface has lots of state that changes in many places.
You want to describe screens declaratively as components.
Your team already uses a virtual DOM library like React.

A click counter, both ways

DOMjsx

// Real DOM: you change the page step by step
const label = document.getElementById("label");
let count = 0;

button.addEventListener("click", () => {
  count += 1;
  label.textContent = `Clicked ${count} times`;
});

Virtual DOMjsx

// Virtual DOM: you describe the result, React diffs it
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Readers ask

Is the virtual DOM faster than the real DOM?

Not inherently. It adds a diffing step, but it batches and minimizes real DOM changes automatically, which is usually fast enough and much easier than optimizing every update by hand.

Does every framework use a virtual DOM?

No. Some frameworks compile components into direct DOM updates or track fine-grained reactive values instead, avoiding a virtual DOM entirely.

Is the shadow DOM the same as the virtual DOM?

No. The shadow DOM is a browser feature that isolates a component's markup and styles from the rest of the page, while the virtual DOM is a JavaScript technique libraries use to plan updates.