I am sure you all must have heard about the word DOM, somewhere in your web development journey. So what is DOM?
DOM stands for Document Object Model.
You can consider dom as a tree structure, in which all the HTML elements and contents are in a tree-like structure.
Let’s understand with a simple HTML example.
<html>
<title>
My Title
</title>
<body>
<a href="">My Link</a>
<h1>My header</h1>
</body>
</htaml>
Here we have a basic HTML code with the title “MY TITLE” and a simple body.
Now if you have to visualize how it would look in a DOM-like structure, see the below diagram.
The diagram shows exactly what the DOM structure would look like. You can see a root element as an HTML tag inside that we have the head and body inside the head we have our title and inside the body, we have our HTML content.
Now since you know about DOM, let's understand the difference between real DOM and virtual DOM.
Virtual DOM is a copy of the real DOM. But when you perform any DOM updation, instead of the real DOM getting updated the virtual DOM is updated first. After that with the help of the Diffin algorithm, a comparison is made between the real dom and the virtual dom, and changes are reflected in the real dom.
Let's visualize this with a diagram,
In the diagram, you can see that I have a basic DOM, with one main parent and other children. Now what if I want to add a new child to the child 3 element?
Now when I do this, I am not directly manipulating this to the real dom, instead, this is happening to the virtual dom first. After I have manipulated the virtual dom by adding a new child a comparison is made in real-time with the virtual dom with the help of the Diffin Algorithm and then the real dom is also updated.
This gives us a boost in our development experience since we are directly not manipulating the dom, this also boosts up our development experience.
Thank you for reading.