Have you ever wondered how HTML, CSS and JavaScript interact in the browser? How exactly does this work and why do we hear so much talk about the DOM? That’s what we’re going to see in this article.
First let’s start by understanding what the DOM is. DOM is an acronym for Document Object Model which is a document generated by the browser when loading HTML and CSS. It is through this interface that we manage to manipulate the elements that are present in the HTML. The BOM is an interface that allows manipulating the elements that are part of the browser, such as the scrollbar, the window size (very useful when we think about responsiveness).
These two interfaces are generated when the browser loads files received from the server and allow our JavaScript application to manipulate what will be displayed. Dynamic cards, a screen pop, etc.
And the virtual DOM?
The virtual DOM is an intermediary layer between the application and the DOM used by newer frameworks like React and Vue. And why create a virtual DOM?
It serves to optimize our website and make changes to the DOM only occur when necessary. That is, let’s assume we have a list on our website that is updated based on user input. In applications that do not use this interface, the DOM is updated every time an input is made. In applications that use this interface, before updating the DOM directly, the framework makes a copy of the elements in memory and then compares it to see if it is necessary to update the DOM.
Top comments (0)