DOM

Although I now understand how browsers and http works, I have very little idea how a web page is rendered when it gets served up from the server, or what the term DOM actually means.

So I’ve done some research on this today and will share my findings. I’ll keep it brief, and in layman’s terms.

In a nutshell, the DOM (Domain Object Model) is a model that represents objects in HTML, XHTML and XML documents, and an interface between static markup languages such as these, and dynamic scripting languages like Javascript.

The DOM is the way Javascript sees its containing web page. Its functions area tied to events triggered on DOM elements. So Javascript needs the DOM in order to dynamically inspect or modify the page. Hence the functions you call in Javascript’s (document).ready occur only when the page has been loaded by the browser (but before it is rendered). This is why Javascript is a client-side language, as its functions are performed by your web browser (rather than the server the page is on). It also explains why it is a dynamic language; Javascript can respond to user-generated events triggered on DOM elements, such as the onClick method, (called when the user clicks on a particular DOM object).

The DOM tree describes the structure of all objects (nodes) of the html page, starting from the document itself (the root), down to text nodes (the leafs). There is a hierarchical relationship of parents, children and siblings between all the nodes on the page. This is why when you an HTML page viewed in an HTML-editor is formatted with the parent nodes on the outside, and everything inside indented, relative to the other nodes.

DOM tree structure

Putting this all together then, this is how a webpage is rendered:

  1. After the request has been made to a server, the server compiles the information it needs to send back, usually as HTML.
  2. When the browser receives this response, it parses the HTML (using a layout engine), and puts it into a DOM(Domain Object Model) tree.
  3. New requests are made for additional resources found in the HTML (stylesheets, Javascript files, etc), and these are returned by the server.
  4. Stylesheets are parsed and the rendering information attached to the specific node in the DOM tree.
  5. Then Javascipt is parsed and executed, and DOM nodes are moved and styled accordingly.
  6. The browser renders the page on the screen from the DOM tree and the style information for each node.
Advertisements

About RNewstead

I am learning every day. Sometimes I worry there are too many interesting things in the world and not enough time.
This entry was posted in Development and tagged . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s