Anyone who has developed using JavaScript should be familiar with the term, DOM or Document Object Model. It’s neat and interesting stuff, and how it evolved over ages is another epic in itself.. but that’s for another day..
So, in the world of Object savvy development, everything is an object. Every web page resides inside a browser Window which can be considered an object. It’s an object complete with cliche windows properties like scrollbar, frame etc..
And for the document, the content we see inside the window, is also an object. It’s quite evident that the HTML script is responsible for the content or HTML scripts are the content. The HTML document is displayed as on object within the window. Note that I used the words document and object. So, the standards by which the HTML document is displayed as an object is called the Document Object Model.
When we say Document Object Model, it means a standard for creating Objects out of a markup language. In addition to HTML, XML and XHTML has their own DOM standards.
This is what W3C says about DOM
The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents. The document can be further processed and the results of that processing can be incorporated back into the presented page.
The DOM follows an hierarchical representation.
Let me just put in a few words on the high level objects..
The Window object is the root of the tree. A Window object represents one open window in the browser. Having said that, in the world of dynamic HTML(will have to write something on it), it’s very common to introduce iframes in pages. In that case, the browser constructs one window object for each iframe. The same reason why the iframes acts as separate entities. The Window object API can be referenced here.
The History object stores the list of URL visited from the page. Consider this instance, I have opened two tabs, viz http://www.google.co.in and http://www.bing.com/. Both of them will have a separate Window object, let’s call them WIN1 and WIN2. And from google, I navigated to the maps tab, i.e https://maps.google.co.in/. So, the previous page(http://www.google.co.in) will be stored in the history object of WIN1. The other window object will be impervious to these changes. Having an array of the previous URLs gives the developer the powers of navigation. The History object has two major functions.
- history.back
- history.forward
Both returns no value and are similar to clicking the ‘back’ and ‘forward’ buttons on the browser. The entire API can be found here.
The Document object is the developer’s blue eyed boy. The Document object stores everything under the <HTML> tag. In other words, each HTML document loaded into the browser becomes a document Object. The Document object can be used to access anything in the HTML document. This is widely used and exploited by developers.
This example by W3C provides a perfect example on how the Document object is used in modern Web apps. The entire API reference can be found here.
The Location object stores the URL details of the current page. The Location object is part of the window object and is accessed through the window.location property. See the Location object dissected.
One thought on “The HTML DOM (Document Object Model)”
Comments are closed.