1. Document Object Model That’s DOM to you
Copyright © Curt Hill

2. Background
JavaScript provides facilities that are independent of any environment
These are the native objects such as Math and RegExp
The browser also provides an object to give facilities pertinant to that environment
This is a host object
Document is the main object
Copyright © Curt Hill

3. Origins Netscape originally created this object
Level 0 was defined for Navigator 2.0 and copied for IE 2
The Intermediate DOM was created for version 4 of Navigator and IE
It was designed to support DHTML but Netscape and IE used diverging standards
Copyright © Curt Hill

4. Real Standards
The W3C got involved to bring a unified definition rather than proprietary confusion
Level 1 was standardized in 1998
This supercedes the intermediates
Level 2 in 2000
Level 3 in 2004
These are referred to as DOM 2, DOM 3
Copyright © Curt Hill

5. What is it? DOM is an application program interface (API)
It describes what a script may obtain from the HTML document that it resides in
Of course, different browsers may implement different subsets
DOM does not dictate what a document should look like
Thus if may have empty facilities
Copyright © Curt Hill

6. DOM 0 This is the simplest It is created in this way:
The browser loads the page
If makes an array of those things that could be of interest:
These include images, links, forms among others
Thus: document.images[0] refers to the first image
Copyright © Curt Hill

7. DOM is a tree
An HTML/XHTML document is a tree so the document object also has a treelike hierarchy
At the document level there are several global properties and methods
Two methods at the document level are:
write
getElementByID
Copyright © Curt Hill

8. Commentary
A document does not have to contain either an image or a form
The length property can then be used to determine how many images actually exist
If you subscript a non-existent object you receive undefined
If the tag has a name field that may also be used instead of a numeric index
Copyright © Curt Hill

9. Example
Consider the following function: function examine(){ fc = document.forms.length; fi = document.images.length; t = document.forms[0]; ... }
Copyright © Curt Hill

10. Using DOM
Embedded JavaScript code may not have access to a complete tree
Since the document has not been completely read in
Most of the event handlers will have complete access
Most of them are executed in response to user action
Copyright © Curt Hill

11. Hierarchy The top of the tree is the window object
It is the default object, so it does not need to be named before document
It contains a variety of methods and properties
Any functions that you write end up being part of window
This is where alert and many other things reside
Copyright © Curt Hill

12. Open method Will open a document
open(URL [, target] [, features] [,replace])
First parameter is the URL
Second has same form as target: (_self, _top, _blank)
The features allows pieces of the browser to be hidden
Replace is boolean – that determines if URL will go into history
close() will close current window
Copyright © Curt Hill

13. Open features height=nn – pixels
location – should the location bar be included
menubar – should the menu bar be included
resizable
scrollbars
status
width=nn
Copyright © Curt Hill

14. Document shape An HTML document should have a two piece partition:
Head
Body
Document thus has two contained objects that represent these
document.head
document.body
It has a variety of other properties and methods as well
Copyright © Curt Hill

15. Document Properties title – the title from the head section
URL – the current location
lastModified – a string with date and time
links[]
forms[]
images[]
Copyright © Curt Hill

16. Specifics Mozillla has IE width – number of pixels available
height – also
characterSet – Usually an ISO standard such as:
ISO IE
scripts[]
fileSize
Copyright © Curt Hill

17. Conclusion
We can now access most of things that are needed in the document
We can access through getElementByID
We can also access through various arrays
Copyright © Curt Hill