Document Object Model: A web page (document) is composed (modeled) of a set of individual elements (objects). These objects can be accessed and modified by a scripting language. The document object model is the hierarchical organization of objects. Objects along with their properties and methods allow the content, structure and style of a web page to be manipulated as the browser loads it or in response to events. The Document Object Model is an application programming interface that defines the structure of a document and the way it can be accessed and manipulated. The interface is intended to be language and platform neutral, however each browser contains a specific DOM implementation. The application is the language used to change the web page (e.g. JavaScript, VBScript).

Object: An object is an element that can be accessed and modified. Objects are typically made up of other objects. For example the object "car" is made of the objects "wheels," "doors," "seats," "headlights" etc. Each of these objects is, in turn, made of other objects, for example a "wheel" is made of "tire," "rim" and "hub cap." Examples of web page objects include body, paragraphs, forms, frames, tables, images, anchors. An image object is accessed with document.images[imgN] where "images" is an array of all <image> elements in the document and "imgN" is the name attribute (or number) of the image.

Property: An object has a set of attributes that describe it. For example, the "wheel" has a size, material, brand, etc. These atributes are called properties. Properties of the image object include height, width, src, alt. The src property of an image is changed with document.images[imgN].src="newsrcURL" The border property of an image is changed with document.images[imgN].border="newborder"

Method: A method is a means to operate on an object. Methods include click(), getAttribute(), setAttribute(), insertAdjacentText().

Collection: An array of related objects on a page. For example document.images refers to all images on a page and document.forms refers to all the forms. An individual image can be accessed by images[N] or images[imgname], where N is the number of the image on page (beginning with 0) and "imgname" is its name attribute. The "all" collection includes all elements in an object. For example document.all includes all elements in the document, body.all includes all BODY elements. The "children" collection includes all elements contained within another element. For example, HTML.children contains the HEAD and BODY elements.

Event Handler: A script that runs as a result of a user or system event. For example, clicking on a button with the mouse generates an event. If a script is associated with the event, it is executed by the browser. The event handler onClick="changeSource('img','newsrc') will execute the JavaScript function changeSource when the element is clicked.

Browser Issues: Navigator and Explorer have different Document Object Models. Objects, properties, collections, methods and events are different in each browser. To insure pages are compatible across browsers use only compatible code, create different page sections for each browser, create different scripts for each browser, or create different pages.

Navigator Object: The navigator objects contains information about the browser displaying the page. It allows dynamic redirecting of the page to accomodate particular browsers. The navigator.appName property contains the name of the browser. The navigator.appVersion property contains the version of the browser.

Examples: Here are a few examples that make use of DOM to dynamically change a web page.