Document Object Model (DOM)

First thing first, we need to understand how a web page is built.

Critical Rendering Path:

How a browser appeared in a nice formatted interactive interface from a HTML source in a viewport is called “Critical Rendering Path". This part basically involves 2 main stages:

A. Stage 1: Browser parses what will appear on the page.

The result of this stage is a Render tree, in which consists of 2 compulsory elements:

• CSSOM: a representation of styles associated with elements
• DOM: a representation of elements

an object-based representation of the source HTML document. It attempts to convert the structure and content of the HTML document into an object model that be used by various programs. It is represented as node tree.

Structure example of DOM

How HTML and DOM differentiate from each other

Update DOM, but won't modify HTML

B. Stage 2: Browser perform rendering

Reference: https://bitsofco.de/what-exactly-is-the-dom/#:~:text=The%20Document%20Object%20Model%2C%20or,Let's%20break%20this%20down.