Document Object Model (DOM)

What is the Document Object Model? Describe its purposes and its use, with examples.

# The Document Object Model (DOM) is a collection of cross-platform and language-independent interface which will allow programs and scripts to access and modify the content, style, layout and structure of documents. The public interface of a DOM is specifies in its application programming interface (API). It is based on an object structure that closely resembles that structure of the documents it models. For example, consider the following code extract from an XHTML document:

<table>

  <tbody>

    <tr>

      <td>Kshitij</td>

      <td>Bidhya</td>

    </tr>

    <tr>

      <td>Lee</td>       

      <td>Baldoph</td>

    </tr>

  </tbody>

</table>

Its graphical representation is as follows:

 And an example of DOM manipulation using ECMAScript:

//access the tbody element from the table element

Var myTbodyElement = myTableElement.firstChild;

//remove first id element

mySecondTrElement.removeChild(mySecondTrElement.firstChild);

Basically, it helps for representing and interacting with objects in HTML, XHTML and XML documents. It states the logical structure of documents and the way a documents is accessed and operated. XML is a mark up language that is used as a way of representing and organizing different kinds of data and information. It present this data as documents where as DOM may be used to manage this data. DOM facilitates developers to build documents, navigate their structure, update, modify, add & delete elements and contents.

With the help of DOM, programmers can easily accessed and update the content in an HTML or XML document.

The goals of DOM objects and interfaces are it gives a consistent and flexible view of document’s contents. A program not only allows its data to be manipulated by other routines, by supporting the DOM API it also allows to reuse those manipulations other DOMs, or to take benefit of those solutions which are already written from those DOMs. The valid example of this was dynamic-HTML scripts; being agreed on the DOM as their standard representation of the document; that scripts written will work properly on all browsers. This not only applies to small programming instead it does to larger-scale programming as well. For instance, a server-side solution might be built out of multiple reusable components, which may or may not all share a single DOM implementation.

So if there is a better implementation on one of the modules which become available, then the existing connection could be unplug and plug in the new component with less recoding.

Likewise, as DOM implementation should be interoperable, they may be different significantly in code size, presentation of individual operations, etc. So, the aptitude to unplug and replace the DOM itself may also be very useful for programmer.