What is the Document Object Model?

The Document Object Model (DOM) is an Application Programming Interface (API) that gives programmers and developers a way of accessing and manipulating the elements within HTML and XML documents.

With the Document Object Model, programmers can create and build documents, navigate their structure and perform various manipulation operations such that add, modify or delete elements and content. Anything found in an HTML or XML document can be accessed, changed, deleted or added using the Document Object Model. In simple sentence "The way that document content is accessed and modified is called the Document Object Model or DOM".

The name "Document Object Model" was chosen because it is an "object model" is used in the traditional object oriented design sense: documents are modeled using objects and the model encompasses not only the structure of a document but also the behavior of a document and the objects of which it is composed. As an object model, the Document Object Model identifies:

• the interfaces and objects used to represent and manipulate a document
• the semantics of these interfaces and objects - including both behavior and attributes
• the relationships and collaborations among these interfaces and objects

The Document Object Model currently consists of two parts, DOM Core and DOM HTML. The DOM Core represents the functionality used for XML documents, and also serves as the basis for DOM HTML. All DOM implementations must support the interfaces listed as "fundamental" in the Core specification; in addition, XML implementations must support the interfaces listed as "extended" in the Core specification. The Level 1 DOM HTML specification defines additional functionality needed for HTML documents.

The most common programming language used in accessing the DOM is JavaScript, which is used very often in websites. This allows for dynamic changes to be made to the DOM, which can include showing/hiding elements (such as text, tables, images, and entire divisions), moving elements, animating elements, and more. In the past, the DOM had fundamental differences between browsers, but today has become much more standardized in modern browsers. This allows for easier cross-browser scripting to be performed by developers.

There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.

The Legacy DOM:

This is the model which was introduced in early versions of JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.

The W3C DOM:

This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.

The IE4 DOM:

This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features.

Conclusion :

I hope that this article would have helped you in understanding Document Object Model. Your feedback and constructive contributions are always welcome.