What is DOM and virtual DOM with example?

The DOM (Document Object Model) is like a tree structure of your HTML — every element like

,

, or becomes a node. The browser uses it to render your webpage. Now, the Virtual DOM, used in libraries like React, is a copy of that DOM in memory. When something changes (like a user clicking a button), React updates the Virtual DOM first, compares it with the previous version, finds the difference, and then updates only that part in the real DOM. It’s like editing only one sentence in a book instead of rewriting the whole page!