1. DOM
The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers (also known as event listeners) attached to them. Once an event is triggered, the event handlers get executed - Wikipedia
If you are a web developer, you have probably opened the inspect tool on a webpage to explore various elements. When we edit a piece of text or style a CSS element, we are interacting with the DOM.
So, you can simply understand the DOM as a structure representing the elements that show on the webpage, and we can interact with the DOM through the DOM API such as getElementById, getElementsByClassName, etc.
2. Shadow DOM
Shadow DOM is a part of Web Components and allows encapsulation and reuse of custom elements without worrying about conflicts with other elements in the main document. Shadow DOM creates a separate region within the DOM, called the Shadow DOM Tree, which is embedded in an element called the Shadow DOM Host. By default, the browser hides this Shadow DOM Tree, so when inspecting the actual DOM tree, we only see the Shadow DOM Host.
With Shadow DOM, we can create components with separate HTML and CSS structures, which helps keep the source code clean and easier to manage.
A simple example of Shadow DOM is the <input type="range" /> element. When inspecting it in the DOM, we only see the <input type="range" /> element itself. However, visually on the website, it appears as a slider with a track and a thumb control.
By default, in browsers, the <input type="range" /> element creates a Shadow DOM tree to display the slider when we use type="range". This demonstrates the encapsulation power of Shadow DOM.
To view the Shadow DOM tree in the DOM tree, you need to enable the
Show user agent shadow DOMfeature. In Chrome, you can do this by going toSettings, selectingPreferences, and checking the checkbox labeledShow user agent shadow DOMunder theElementssection.
3. Virtual DOM
A virtual DOM is a lightweight JavaScript representation of the Document Object Model (DOM) used in declarative web frameworks such as React, Vue.js, and Elm. Updating the virtual DOM is comparatively faster than updating the actual DOM (via JavaScript). Thus, the framework is free to make necessary changes to the virtual DOM relatively cheaply. The framework then finds the differences between the previous virtual DOM and the current one, and only makes the necessary changes to the actual DOM - Wikipedia
Virtual DOM is a concept closely associated with the two most popular web development frameworks today: React and Vue. Both frameworks utilize Virtual DOM to optimize the updating of the user interface and make source code management easier for developers.
In the simplest terms, Virtual DOM can be understood as a JavaScript object that mirrors the real DOM. It is managed by JavaScript frameworks.
When we update an element in the Virtual DOM, frameworks have algorithms to detect which elements have changed and then update only those elements in the real DOM. This process results in changes to the user interface. The algorithms used to detect changes and update the real DOM vary between frameworks.
4. Conclusion
Understanding DOM, Shadow DOM, and Virtual DOM is key to building modern web applications. DOM represents the fundamental structure of a web document, while Shadow DOM aids in encapsulating and protecting components. Meanwhile, Virtual DOM optimizes performance by minimizing direct updates to the actual DOM. The combination of these technologies delivers a powerful and efficient web experience.
I will provide more detailed introductions to Shadow DOM and Virtual DOM in upcoming posts.
