Definition of the Document Object Model

Topics: Document Object Model, HTML, World Wide Web Pages: 5 (549 words) Published: May 15, 2014

The Document Object Model
The Document Object Model is a major component of Dynamic Hypertext Markup Language, or DHTML. DHTML is what has allowed web pages to become more interactive over the years. Improved animations, form processing, document manipulation, and online games are all made possible through the use of DHTML. DHTML is primarily composed of JavaScript, XHTML, CSS, and the Document Object Model (DOM). According to Chapter 10 of JavaScript 5th Edition (Gosselin, D. 2011), the DOM “represents the HTML or XML of a Web page that is displayed in a browser.” Therefore there are two aspects of the Document Object Model: HTML DOM and XML DOM. In a nutshell, the DOM is a collection of the HTML or XML elements that are rendered by a browser. To further elaborate let’s take a look at two important objects within the DOM: The Document object and the Image object.

The Document object is a collection of methods and properties that are used to control various elements of a web page. All the content that appears on a web page is contained within an element tag and, through the use of the DOM, can be manipulated with JavaScript. The following is a list of methods of the Document object:

open()
close()
getElementsByName()
getElementsByTagName()
getElementById()
write()
writeln()

These methods are used to provide interaction between the user and the web page elements. The open() method opens a new document in a window or frame, while the close() method signifies the end of the document. The getElement methods are used to return various HTML element value, and the write() and writeln() methods are used to display content in the document. Now let’s look at the different properties of the Document object:

anchors[]
body
cookie
domain
forms[]
images[]
links[]
referrer
title
URL
These properties are used to return the various properties of a document, which can then be controlled with the use of JavaScript. The Document object is just one of the important objects within the DOM. Now let’s take a look at the equally important Image object.

“An Image object represents an image created using the element” (Gosselin, 2011). The primary use of the Image object is to dynamically change images on a web page. Image object created with the tag and placed in the images[] array in the order in which they are presented. The Image object contains several properties used to manipulate the images on a web page:

align
alt
border
height
isMap
longDesc
name
src
useMap
vspace
width

The image properties are used to return or set the various properties of an image. This is what makes it possible to manipulate images, or display new images, without having to load a new web page. This is the core purpose of Dynamic HTML.

The most important aspect of the Document Object Model is the ability to return various element values so they can be manipulated through the use of JavaScript. This feature provides improved functionality and interaction with a web page. The DOM, as well as the other components of DHTML, have made the world wide web into what it has become today, and through further advancements in this technology it will continue to improve in the coming years.

References
Gosselin, D. (2011). JavaScript (5th ed.). Boston, MA: Thomson / Course Technology

References: Gosselin, D. (2011). JavaScript (5th ed.). Boston, MA: Thomson / Course Technology
Continue Reading

Please join StudyMode to read the full document

You May Also Find These Documents Helpful

  • PHP and the Document Object Model Essay
  • Document Object Model Research Paper
  • The Definition of a Game Design Document Essay
  • Togaf Architecture Definition Document Essay
  • Object Essay
  • Essay about Document
  • Essay on Document
  • Essay about document

Become a StudyMode Member

Sign Up - It's Free