Transcript Introducing DOM: The Tree Structure

Beginning DHTML:
Introducing DOM
Copyright ©2005  Department of Computer & Information Science
Goals
By the end of this lecture you should …
• Understand a basic definition of the
Document Object Model (DOM).
• Understand the differences in DOM
Standard Levels.
• Understand the importance of writing
well-formed XHTML documents.
Copyright ©2005  Department of Computer & Information Science
What is the DOM?
• The Document Object Model (DOM) is a
model of programming that concerns the
way in which we represent objects
contained in a web document (single web
page).
• There are several different levels of the
DOM Standard, as proposed by the W3C.
Copyright ©2005  Department of Computer & Information Science
DOM Standard Levels
• Level 0: Not really a standard level. Refers
to models developed by browser vendors
for handling documents prior to a
standard.
• Level 1: First recommendation from W3C
for a DOM Standard. Includes two parts: a
core (covers XML & HTML) and an HTMLonly section.
Copyright ©2005  Department of Computer & Information Science
DOM Standard Levels
• Level 2: Includes additions for events
and style sheets. Supported by
current versions of the most popular
browsers.
• Level 3: Still under development.
Includes additions for XML features.
Copyright ©2005  Department of Computer & Information Science
Linear vs. Hierarchical Views
• Level 0 of the DOM takes somewhat
of a linear view of objects in a web
document, forcing the programmer to
“drill down” from the window object
to relevant properties and methods:
strUserName =
window.document.frmMain.txt
User.value
Copyright ©2005  Department of Computer & Information Science
Linear vs. Hierarchical Views
• Level 1 and subsequent DOM Levels perceive
objects using a hierarchical view. Instead of
identifying specific HTML tag names, this view
works through the idea of nodes in a tree
diagram. Each node has the potential to be a
parent, sibling, or child node of other nodes in
the document. This model may be a little trickier
to program, at first, but saves us from having to
know the names of all the elements in our
document.
Copyright ©2005  Department of Computer & Information Science
Open the file called
introDOM_01.html
and examine the XHTML
script.
Copyright ©2005  Department of Computer & Information Science
- Adapted from Beginning JavaScript by Paul Wilton
Copyright ©2005  Department of Computer & Information Science
Preparing Your Pages for DOM
• All pages must be well-formed XHTML
documents.
• All pages must include a valid DOCTYPE.
• You must include all text inside valid
XHTML elements.
• Identify relevant elements using the id
attribute.
Copyright ©2005  Department of Computer & Information Science
The XHTML id Attribute
• id is an XHTML attribute that
provides an internal identifier for an
XHTML element (tag).
• When can use the id attribute to
uniquely identify an element in order
to read and/or manipulate its
contents.
Copyright ©2005  Department of Computer & Information Science
Open the file called
introDOM_02.html
and examine the XHTML
script.
Copyright ©2005  Department of Computer & Information Science
XHTML Validators
• Tidy:
http://tidy.sourceforge.net/
• HTML Validator for Firefox:
http://users.skynet.be/mgueury/mozilla/
• W3C Markup Validation Service:
http://validator.w3.org/
Copyright ©2005  Department of Computer & Information Science
Summary
• The DOM is a model of programming
concerned with objects in a web
document.
• While DOM, Level 0 takes a linear
approach to document objects,
subsequent levels view those objects
using a hierarchical scheme.
continued …
Copyright ©2005  Department of Computer & Information Science
Summary
• To use DOM, XHTML web pages must
be well-formed.
• All text in well-formed pages must be
enclosed in elements.
• All relevant elements must include an
id attribute and value.
Copyright ©2005  Department of Computer & Information Science
Resources
• Beginning JavaScript, 2nd Edition. Paul
Wilson. Wiley Publishing, 2004.
(ISBN: 0-7645-5587-1)
Copyright ©2005  Department of Computer & Information Science