DO
Rasel Ahmad
React JS Developer | MERN Stack Developer | Software Engineer | Next Js Developer
DOM
This blog is about the most important for the web that is DOM (Document Object Model). A Document object represents the HTML document that is displayed in that window. More simply, a document object represents the whole HTML document. When we run an HTML document on the web and the document is loaded in the browser it becomes a document object.
The DOM views an HTML document as a tree of nodes and a node represents an HTML element. An HTML document called a root node contains a child node which is <html>. The <html> element contains two children which are <head> and <body>. Then <head> and <body> have their own children. You will betten understand from the following graph.
Here we can access these elements using JavaScript events. We can select a document object using JavaScript selector method like getElementById(), getElementByName(), getElementByTagName(), querySelector() and querySelectorAll() etc.
We can also create the new elements using the createElement() method and style them. Moreover, we can addEventListerner() to listen for events on the page.
DOM stands for Document Object Model and is a programming interface that allows us to create, change or remove elements from the document. We also have access to add events to these elements to make our web page more dynamic.
DOM in REACT
React Js creates a virtual dom in memory for every re-render. Virtual dom is not more than a copy of real dom.
We can think of a virtual dom as a tree and we can think of every node as a component. If we change any state of the tree then it creates a new tree where the change component and child component creates. Here react has two dom representations and react compares these changes using diff algorithm.