The browser comes with built-in classes like HTMLDivElement , HTMLScriptElement , Node etc.

After the browser has created Nodes from the HTML document, it has to create a tree-like structure of these node objects. Since our HTML element will be nested inside each other, browser needs to replicate that but using Node objects it has previously created. This will help the browser efficiently render and manage the webpage through its lifecycle.

(DOM Tree)

A DOM tree for our earlier HTML document looks like above. A DOM tree starts from the topmost element which is html element and branches out as per the occurrence and nesting of HTML elements in the document. Whenever an HTML element is found, it creates a DOM node (Node) object from its respective class (constructor function).

A DOM node doesn’t always have to be an HTML element. When the browser creates a DOM tree, it also saved things like comments, attributes, text as separate nodes in the tree. But for the simplicity, we will just consider DOM nodes for HTML elements AKA DOM element. Here is the list of all DOM node types.

You can visualize the DOM tree in Google Chrome DevTools Console as shown below. This will show you the hierarchy of DOM elements (a high-level view of DOM tree) with properties of each DOM element.

JavaScript doesn’t understand what DOM is, it is not part of the JavaScript specifications. DOM is a high-level Web API provided by the browser to efficiently render a webpage and expose it publically for the developer to dynamically manipulate DOM elements for various purposes.

Using DOM API, developers can add or remove HTML elements, change its appearance or bind event listeners. Using DOM API, HTML elements can be created or cloned in memory and maniuplated without affecting the rendered DOM tree. This gives developers the ability to construct highly dynamic web page with rich user experience.

CSS Object Model (CSSOM)

When we design a website, our intentions are to make it as good looking as possible. And we do that by providing some styles to HTML elements. In the HTML page, we provide styles to HTML element using CSS which stands for cascading style sheet. Using CSS selectors, we can target DOM elements and set a value to style property such as color or font-size .

There are different methods of applying styles to HTML elements like using external CSS file, embedded CSS using <style> tag, using inline style using style attribute on an HTML element or using JavaScript. But in the end, the browser has to do the heavy lifting of applying our CSS to the DOM elements.

Let’s say that, for our earlier example, we are going to use the below CSS styles (this is not the CSS used for the card shown in the screenshot). For the sake of simplicity, we are not going to bother about how we are importing the CSS styles in the HTML page.

html {

padding: 0;

margin: 0;

} body {

font-size: 14px;

} .container {

width: 300px;

height: 200px;

color: black;

} .container > h1 {

color: gray;

} .container > p {

font-size: 12px;

display: none;

}

After constructing the DOM, the browser reads CSS from all the sources (external, embedded, inline, user-agent, etc.) and construct a CSSOM. CSSOM stands for CSS Object Model which is a Tree Like structure just like DOM.

Each node in this tree contains CSS style information for that particular DOM element. CSSOM, however, does not contain DOM elements which can’t be printed on the screen like <meta> , <script> , <title> etc.

As we know, most of the browser comes with its own stylesheet which is called as user agent stylesheet, the browser first computes final CSS properties for DOM element by overriding user agent styles with CSS provided by the developer properties (using specificity rules) and then construct a node.

Even if a CSS property for a particular HTML element isn’t defined by either the developer or the browser, its value is set to the default value of that property as specified by W3C CSS standard. While selecting the default value of a CSS property, some rules of inheritance are used if a property qualifies for the inheritance as mentioned in the W3C documentation.

For example, color and font-size among others inherits the value of the parent if these properties are missing an HTML element. So you can imagine having these properties on an HTML element and all its children inheriting it. This is called as cascading of styles and that’s why CSS is called as Cascading Style Sheet. This is the very reason why the browser constructs a CSSOM, a tree-like structure to compute styles based on CSS cascading rules.

You can see the computed style of an HTML element by using Chrome DevTools console in Elements panel. Select any HTML element from the left panel and click on the computed tab on the right panel.

We can visualize a CSSOM for our earlier example using the below diagram. For the sake of simplicity, we are going to ignore user agent stylesheet and focus on CSS styles mentioned earlier.

(CSSOM Tree)

As you can see from the above diagram, our CSSOM tree does not contain elements which do not get printed on the screen like <link> , <title> , <script> etc. CSS property values in the red colours are cascaded down from the top while property values in the dark are overriding the inherited values.

Render Tree

Render-Tree is a tree-like structure constructed by combining DOM and CSSOM trees. The browser has to calculate the layout of each visible element and paint them on the screen, for that browser uses Render-Tree. Hence, unless Render-Tree isn’t constructed, nothing will get printed on the screen.