In this article, we will discuss DOM, Shadow DOM, and Virtual DOM. First, DOM (Document Object Model) is the standard that helps the browser understand and render the HTML code we write. This standard, as well as Shadow DOM, is determined by the W3C (World Wide Web Consortium).
DOM is the tree-like structure in which the elements that make up the HTML structure are held on the browser side. The DOM API consists of functions and properties that allow us to manipulate this structure. For example, let’s say we have a simple HTML page with an h1 tag that says “Hello world”. We can manipulate this tag or other tags placed in the DOM using the DOM API.
document.querySelector("h1").innerText = "Bye bye world"These features are not included in the ECMAScript specification (Javascript standards), they are determined separately by “Whatwg”.
Shadow DOM, allows us to create our own small DOM trees within the main DOM. These small trees can have their unique styles and JavaScript, which helps us in terms of abstraction. If you inspect the page resources, you may come across different tags than other HTML tags. For example, when you view the video tag, it has its own volume controls, timeline, and unique styling. However, when you open the developer console and inspect it, you only see the video tag and its link. If you activate the option to view the shadow DOM from the console settings, you can inspect the tag and read its other elements and styling. In this article, we will not go into the details of web components.
Virtual DOM is used by modern JavaScript frameworks to achieve maximum performance and minimize browser differences in web applications where we constantly interact with the interface and can change pages by manipulating the DOM. With Virtual DOM, any change is reflected in the Virtual DOM before directly modifying the DOM, which is then compared with the Virtual DOM to improve performance.
References
Cover Photo by Denny Müller on Unsplash