What is DOM?

The( Document Object Model), represents the web page as a tree structure. Any piece of HTML that we write is added as a node, to this tree. With JavaScript, we can manipulate any of these nodes (HTML elements) and update their styles, and attributes.

How Updating DOM

As DOM is represented as a tree itself, If you know a little about JavaScript then you might have seen people making use of the 'getElementById()’ or ‘getquarryselector()’ method to modify the content of the DOM. Every time there is a change in the state of your application, the DOM gets updated to reflect that change in the UI**(User Interface)**.

let's see the examples:

//simple getquerrysector method
document.querySelectorAll(selected class/id & variable name-".index").innerHtml = 'updated value'

Types of DOM

1. Virtual /Real DoM

2. React Dom

1.Virtual DOM

So, whenever there is a change in the state of any element, a new Virtual DOM tree is created. This new Virtual DOM tree is then compared with the previous Virtual DOM tree and make a note of the changes. After this, it finds the best possible ways to make these changes to the real DOM. Now only the updated elements will get shown on the page again.

2.React DOM

Let's look at how React works by using Virtual DOM.

Each UI is an individual component, and every component has its state. Whenever any change is made to the component's state, React updates the virtual DOM tree but does not change the actual DOM tree. React knows which objects are changed in the virtual DOM.

let's see the examples:

function functionName(){
    return(
        <div>
        Introduction      
        </div>
    )
}

Hope you all understand,😊

�