HTML Document Object Model Tutorial with Stone River eLearning

DOM, or Document Object Model, defines a structured representation to organize the HTML documents in a tree structure. From a technical point of view, DOM is a language independent and cross platform convention for the interaction and representation through objects in HTML. The HTML document that we have written on our text editor is parsed by the browser and turned into a structured representation through Document Object Model.  In simpler words, DOM is a model where the document of the Webpage, i.e objects like elements, links etc can be manipulated.

Why is DOM useful to me?

The Document Object Model provides a very versatile view of the contents in a document. DOM is useful for a web designer as it allows the data in the document to be manipulated by other routines in a way that the manipulations can be reused with other DOMs. As a programmer, you can also make use of the solutions that are already present for a particular DOM.

  1. Programmers who are inclined towards learning and are ready to invest their time and resources in it, may use the DOM calls to apply the skills acquired.
  2. By switching to DOM which is a cross platform convention, scripts that will work effectively in on all browsers can be written.
  3. On a larger scale, a solution may be formulated for any problem with the whole server by using the different DOMs.
  4. The DOM is a better representation because it makes it easier to unplug the existing connections and plug in to new components with minimal recording.


  • DOM implementations may vary in size and memory demand, with a few also differing in performance of individual operations.




<title> My Title </title>



<h1> My Header </h1>

<a href="">My Link</a> 



A structured representation of the DOM tree of objects in a document looks something similar to this:


Download the source code here:


(Visited 441 times, 1 visits today)