There is confusion out there between these three terms. The DOM is an absolutely integral portion of modern web development, and knowing how to differentiate the three and knowing when to use these is crucial for being an effective web developer.
The DOM
So when you have markup on your page with HTML, your browser compiles all that into a Document Object Model which we abbreviate to the DOM. This is an application programming interface (API) that the browser gives you in order to be able to interact with the contents that are rendered on the page.
This sounds more complicated than it is, because at its simplest, you can throw an html file into a server and what will come out are those contents rendered, just like you wrote them. You can think of the DOM as the way that the html is presented to you when you inspect your browser window and go to the elements tab.
The Virtual Dom
The virtual DOM is like the regular DOM, except that it is held in JavaScript memory. What that means is that the virtual dom has all the properties of the regular HTML elements that you usually see on the page, except that the browser has not rendered them. You can't actually see it, but you can interact with it through JavaScript. This is how frameworks like react, vue and angular make web pages with high degrees of interactivity. If you turn off JavaScript and load a react application, you might find a single DOM node and a blank page.
This allows many different and cool things for web applications. Not having to worry about rerendering every time that something is changed, allows frameworks like react to update only the nodes which have changed when the data gets updated. These diffing algorithms are extremely powerful and make these frameworks very effective ( ...and sometimes fast!).
The Shadow Dom
The Shadow DOM is something completely different than the virtual DOM. The shadow DOM is a browser specification for building completely isolated HTML elements that are not affected by the styles that are currently affecting the rest of the page. It is one of the specifications that are aiming at making modular HTML components which can be imported into and out of different documents.
I'd say that this is not so popular in enterprise applications, but it allows for building HTML without the overhead of frameworks through the Web Component Specification. It can be tricky if you encounter it and don't know how to use it, but very helpful if you use it deliberately.
Hope that this helps you out if you are having trouble figuring out the differences.
Top comments (5)
I believe Angular uses what is called an Incremental DOM which compiles the templating language into a set of instructions for trees which are diffed against the real DOM.
I have been using this for a custom markdown renderer that involves iframe.
How to prevent flickering in Live Markdown Editor
Pacharapol Withayasakpunt ・ Mar 12 '20 ・ 1 min read
Hm, was unaware of this. Thanks for the new hole to dive into !
Important to note: DOM and ShadowDOM are W3C standards, "virtualDOM" is something Frameworks and Libraries implement... it is not a standard.
Good catch, I didn't specify that distinction.