Introduction

In previous article we have discussed how a browser works. One of the important aspect of browser is the DOM Model. DOM stands for Document Object Model. It was firstly introduced in 1998 by World Wide Web Consortium.  In this article we will explore more and learn what a DOM is.

Definition

Document Object Model is a cross platform programming interface that treats HTML, XML and other mark-up languages in the form of a tree structure. In a Document Object Model every tag/element is represented by an individual node. Every browser utilises a DOM structure to display a webpage.

How Document Object Model Works

Once the browser gets the content of a webpage from the server, it parses the XML into HTML and later converts the element of HTML to DOM nodes in a tree called “content tree”. Then the CSS is parsed and converted into a tree called “render tree”. The nodes of these trees are later displayed on the screen according to their coordinates. A generic example is shown below:

Figure 1 HTML DOM Tree Diagram

The learning point here is that, whatever code you write for frontend, it will be converted into the basic languages, i.e. HTML, CSS and JavaScript. And the HTML and CSS will be converted into a Document Object Model tree structure and will be then displayed on the browser window accordingly.