160 likes | 177 Views
Beginning DHTML: Introducing DOM. 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. What is the DOM?.
E N D
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.
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.
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 HTML-only section.
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.
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.txtUser.value
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.
Open the file called introDOM_01.htmland examine the XHTML script.
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.
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.
Open the file called introDOM_02.htmland examine the XHTML script.
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/
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 …
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.
Resources • Beginning JavaScript, 2nd Edition. Paul Wilson. Wiley Publishing, 2004. (ISBN: 0-7645-5587-1)