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.
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