• 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?
  • Visit this link with different browsers.
    
    
• Mozilla.org has very readable explanations and examples:
  • Using the W3C DOM Level 1 Core
    • DOM Level 1 allows you to change the content tree any way you want
    • it is powerful enough to build any HTML document from scratch
    • an easy approach is to use JavaScript to change the DOM dynamically
    • the document object implements the Document interface from the W3C's DOM Level 1 spec
    • visit this link with different browsers - view the source
      
      
  • Traversing an HTML table with JavaScript and DOM Interfaces
  • The DOM and JavaScript - What is doing what?
  • some fun demos
  • some references
    • Mozilla Web Developer Docs
    • The Document Object Model in Mozilla
    • Using Web Standards... - some advice on moving to a standards based approach to Web development
      
      
• quirksmode.org
  • DOM1 Tutorial
    • scroll down to "Changing a Node" - this is a live tutorial - click on the places where it says "Try it"
      
      
  • W3C DOM compatibility tables - visit the test pages with different browsers
    • Core compatibility
      • basics test page
      • node test page
      • children test page
      • lots more... go back up and look at the HTML, CSS, Events tables
      • my favorite - nodetree test page
        
        
• 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)
      • look up the input element at W3Schools - scroll down to the try it yourself demo

    
    

    
    
  • 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