Document Object Model DOM

1
Document Object Model (DOM)

• Basics
• Names and organizes objects on a page
• First implemented in Navigator 2.0 (1995)
• Key terms
• Objects
• Properties
• Methods
• Event handlers

2
Document Object Model (DOM)

• Object
• A generalization of a web page element
• E.g., document, image, table, form
• Also built-in JavaScript objects (e.g. Date,
  Math) and user-defined objects
• An instance of an object is one copy of it
• E.g., a picture on a page is an instance of an
  image object
• Created via JavaScript or when you simply put one
  on a page
• All instances of the same object have similar
  features, with varying values
• Properties, methods and event handlers
• E.g., the source and dimensions of two images

3
Document Object Model (DOM)

• Properties
• The values that all instances of a particular
  object share
• the Array object has a length property
• the Window object has a menuBar property
• the CheckBox object has a checked property
• Etc.

4
Document Object Model (DOM)

• Methods
• The actions that can be applied to an object
• the Array object has a sort method
• the Window object has open and close methods
• the Form object has a submit method
• the Date object has getMonth and getDay methods
• Etc.

5
Document Object Model (DOM)

• Event Handlers
• The events that will trigger an action for an
  object
• the Button object has an onClick handler
• the Window object has an onLoad handler
• the Form object has an onSubmit handler
• Etc.

6
Document Object Model (DOM)

• The DOM is a hierarchy
• Objects may have other objects as properties
• the Window object has a Document object as a
  property
• the Form object has Button and Checkbox
  properties
• Etc.

7
Document Object Model (DOM)

• Dot syntax is used to access the DOM
• Go from general to specific
• document.write()
• document.myPicture.src
• myForm.firstname.value
• Other examples weve seen

8
Document Object Model (DOM)

• Netscape vs. Microsoft (again!)
• DOMs for Navigator and IE are not the same!
• W3C sets DOM standards, but browsers are not
  obligated to comply
• Must be careful with browser compatibility

9
Document Object Model (DOM)

• How do you make use of it?
• Decide what you want to do
• Look up what you need (see below)
• Use JavaScript to create/manipulate the objects
  as desired
• References
• JavaScript book Big Object Table (p. 451)
• JavaScript 1.5 Reference
• http//devedge.netscape.com/central/javascript/
• MSDN DHTML References
• http//msdn.microsoft.com/workshop/author/dhtml/re
  ference/dhtml_reference_entry.asp