What is DOM, Shadow DOM and Virtual DOM?

everyone that has come on and in this lesson we're going to look at the Dom we'll see what is the difference between the Dom virtual Dom and the shadow Dom and we'll also look at some practical examples to understand how the real world usage of these looks like here I have a simple HTML file in the head we have a title set to what is Dom and in the body we have a simple h1 saying hello world if you look at the browser you will see that we have the hello world printed here but we just give it the text how is the browser able to render this in the form of this page the browser does it with the help of a Dom but what is Dom Dom stands for document object model and it is the in-memory representation of our HTML in the form of objects so the dommages the node tree format it looks like this as you can see we have the multiple items of our HTML represented as nested nodes shown in the form of a tree open the console and put document you'll see that we are getting the powered document object inside the document we have the head we have our body inside the body we have the h1 I can put here also document dot head to get our head element and if I put here document dot body we have our body element inside the body we have the h1 and if you want to manipulate our objects so for example if I want to put the bagger on the body I can do that also so I'll do document dot body dot style dot background let's say blue and our blue background is applied on our body there are a bunch of methods in the document object which begins use also so let me first clear our browser state so I'll refresh and now if I do document dot qde selector I see that I get h1 you see that it is giving us the h1 and if I put here let's say styled or tone size 92 pixel we are modifying the h1 state now all these methods and the prof that we are using to manipulate our Dom is called the Dom API and it is important to note that this Dom API is not the part of the JavaScript specification if I open the ACMA script language specification and search here QT selector all or puri selector you will not find anything for this there is a separate specification for the Dom which defines what all of these methods and properties are supposed to do so if I search for here the QT selector the behavior is defined that what the GUI selector is supposed to return when we execute also the specification is not specific to the browser's so anyone can go and write the programs or library which uses the HTML and parses the Dom based on the specification listed here you can read more about the Dom API and the available methods in the mdn Docs so for example if I search for Harry QE selector inside that we can find the details about it and also the examples to understand the behavior of these ok now that we have covered the Dom let's look at the shadow Dom aerodrome is the relatively new Dom feature that allows you to create custom components let's have a look at an example to understand this better here I've added a video element to our HTML page and if I open the browser and play the video our video is playing and we have a couple of buttons here is the play and pause buttons we have the speaker icon we have the menu and so on but if I inspect our video element and look at the dev tools we don't see any of the buttons here or the speaker or all of these menu items here so how is it working this video component is a custom component built by the Chrome using the shadow Dom the chrome doesn't show the shadow Dom by default but we can enable it from the settings so if I go here and enable the user agent share DOM and now if we go back to the video tag and click this we have the shadow root inside that we have all our items so now I can inspect the play button and this is here and all the CSS is here and so on the share Dom allows us to create the subtree of Dom inside some Dom element you can also write some JavaScript in it so for example if I play this video you see that we have a bunch of manipulations in our subtree using the JavaScript and all this finality is hidden from the client so we don't have to worry about it so chrome is doing it in this web component by itself using the shadow Dom this parent component is called shadow host and inside that we have the shadow component another benefit of using the shadow Dom or the custom components is that our CSS in the application or the page doesn't affect CSS or the shadow Dom they say that I want to make all the div background blue so this will not affect any of the nested elements that we have inside our shadow Dom and same for the shadow Dom component so any CSS that you have inside the head root this will not leak out to the outer elements custom components and share Dom is supported in almost all the major browsers except the IE 11 where we can use this polyfills to make them work in the IE levan as well we're not going to create any custom components or web components in this lesson but if you're interested in that feel free to comment below and we'll do that in the later lesson maybe the last item that we're going to cover in this lesson is the virtual Dom in the modern front-end development most of the applications that are being built these days are javascript heavy so there are a lot of features like the data binding so whenever the values in the variables are change they're automatically reflected in the browser and there are other features like the handlers any mission and there are hundreds and hundreds of components the problem with all of this is if you do the changes into the browser immediately on the change of the variables so this is going to slow down the application because Dom manipulation the three manipulations are heavy but most of the frameworks they do is the commute of virtual Dom which is the abstraction on top of the existing DOM and then they do the manipulations on the virtual Dom in the memory or the abstraction that they have available on top of the DOM and then they decide when they're going to do the changes into the actual Dom whenever it is suitable the s is one of the frameworks which uses the internal virtual Dom so if you look at the docks they say the react implements a browser independent down system for performance and cross browser compatibility they also have a couple of differences from the actual Dom so for example if you look at the attributes they have the camelcase variables and also the human handlers they behave a bit differently and so on and that wraps up our lessons if you have any questions or comments feel free to leave them below and I will see you in the next lesson

Channel: the roadmap

Views: 22,285

Rating: 4.8368578 out of 5

Keywords: JavaScript, DOM, Shadow DOM, Virtual DOM, ReactJS, Browsers, HTML, Document Object Model, What is DOM, Dom vs Shadow Dom, Shadow DOM vs Virtual DOM

Id: 7Tok22qxPzQ

Length: 5min 49sec (349 seconds)

Published: Sat Jun 20 2020