CSCI 465 - Web Programming Fundamentals
Document Object Model (DOM)
- What is it? From the W3C...
"The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update
the content, structure and style of documents. The document can be further
processed and the results of that processing can be incorporated back
into the presented page."
"The DOM aims to make it easy for programmers to access components
and to delete, add, or edit their content, attributes and style. In
essence, the DOM makes it possible for programmers to write applications
which work properly on all browsers and servers and on all platforms."
- a tree structure that represents the document
- content and elements are represented by nodes in the tree
- nesting is represented by the tree hierarchy
|
|
diagrams from Mozilla.org
|
- the DOM has been around since early browsers
- DOM levels
- The "DOM Level 0" is the object model that was common across
browsers before the W3C started to standardize the DOM.
- The W3C's DOM Level 1 is an object model that represents and allows
dynamic changes to the content of HTML and XML documents.
- The W3C's DOM Level 2 is an object model for all the things in DOM Level
1 plus stylesheets, event handling, and many other things.
- What
does each DOM Level bring?
- DOM Level 1 has:
- DOM1 Core - fundamental interfaces that can represent any structured
document
- DOM1 HTML - provide a more convenient view of an HTML document
- DOM Level 2 consists of 6 W3C Recommendations
- DOM2 Core - extends the functionality of the DOM1 Core
- DOM2 Views - dynamically access and update the content of a
representation of a document
- DOM2 Events - a generic event system - concepts of event flow,
capture, bubbling, and cancelation
- DOM2 CSS - dynamically access and update the content of style
sheets
- DOM2 Traversal and Range - dynamically traverse and identify
a range of content in a document
- DOM2 HTML - dynamically access and update the content and structure
of HTML documents
- DOM Level 3 consists of 5 different specifications (currently under
development - 2006 - and not well supported)
- DOM3 Core - will extend the functionality of the DOM1 and DOM2
Core
- DOM3 Load and Save - dynamically load the content of an XML
document into a DOM document, or save a DOM document into an XML
document
- DOM3 Validation - dynamically update the content and the structure
of documents while ensuring that the document remains valid
- DOM3 Events - extension of the DOM2 Events - focus is on keyboard
events
- DOM3 XPath - functionalities to access a DOM tree using XPath
- W3C DOM technical
reports
- What does your user agent (browser)
claim to support?
- Mozilla.org has very readable explanations and examples:
- quirksmode.org
- ZVON
DOM2 Reference
- the quiz script from chapter 11
- quiz.html - works in Internet
Explorer (6) but not in Firefox (1.5)
- quiz-revised.html
- works in both - try it
- uses document.getElementById( )
- each radio button has a unique id attribute
- all radio buttons have the same name attribute (this gives
them the radio behavior)
- Could you revise this further
to use the DOM to insert the response from checkAnswers( ) into the document??
Notes, figures, and examples from:
- W3C
- Mozilla.org
- quirksmode.org
- Internet & World Wide Web How to Program, Third Edition, by Harvey M.
Deitel, Paul J. Deitel, and Andrew B. Goldberg, © 2004, Prentice Hall