DOM (document object model) is an interface that allows you to manage the content of a web page or any other document with the help of a program and you are also allowed to manipulate and access it in web development time. It will provide you with a structure and all the object oriented representation for all the individual elements of the content of a web page and also shows the method for setting and retrieving the properties of these objects. Apart from that it also shows method for subtracting and adding these objects and thus allowing you to create a dynamic content.

Apart from that DOM also gives an interface for dealing with the various events and this allows you to response and the capture the different actions of the browser.

Support and Levels of DOM

When Jscript was first introduced on the different browsers there was a need to allow the different elements on the different pages to be accessed with the help of pure scripting. Every vendor has an implementation of their own but the standards emerged and thus DOM came into existence.

Take for example:

Most of the browsers make use of a wide range of image objects to represent the tags on different pages. These can be completely manipulated with the help of java script. An image with a simple rollover will use a code like this:

function testDOM()

{

var mydiv=document.getElementsByTagName(“div”);

if(mydiv!=null)

{

//the first element in the array since there is only one div element

mydiv[0].innerHTML=”Ouch”;

}

}

These were the early models and have limitations. The problem as that they provided access to a small number of attributes and elements like certain links and images.

As the new versions of the browser were released the DOM model also expended. But there were certain compatibility problems as each vendors tried to add their own bit. There are different levels of DOM and each of them has something in common.

JavaScript DOM for changing the styling elements of your page. Take for example the following coding structure:

function testDOM()

{

var mydiv=document.getElementById(“main”);

mydiv.style.color=”#FF0000″;

}

Numerous aspects of the pages can be controlled with the use of JavaScript that is inclusive of all the elements and how they can be displayed. DOM gives you the ability to access the different section of a page. This helps you in making the desired changes.

You can also use DOM in creating new elements with your document. Look at the following JavaScript code in the head section:

function testDOM()

{

var mydiv=document.getElementById(“main”);

var newpara=document.createElement(“p”);

newpara.innerHTML=”I’m new!”;

mydiv.appendChild(newpara);

}

Test these pages then press the button. With the use of the DOM you can access the page element. You can also add extra elements to your page and then manipulate the content on the JavaScript.

DOM is mainly used to increase the speed and it is also used to enhance the process of coding and make it much easier. This will surely help your website in the long term.