index.htm
START
Netscape "Gecko" CodeStock Slide Show on DOM Level-1
Important:
Before You Start
Requirements
The slide presentation consists of HTML files designed for the "Version 5" browsers from Netscape and Microsoft (Netscape Navigator 5 and Internet Explorer 5) only.
If you are using either of these browsers, the legend above reads: "START". If you are NOT using them, the legend above may read, "SLIDE SHOW NOT SUPPORTED" or there is no such message at all.
If you fail to see "START" above, or if you see "SLIDE SHOW NOT SUPPORTED" above, do not use this slide show.
Instead, use this link to view all slides in one text file:
allslides.txt
Also note:
- The slides are designed for 800x600-pixel screen resolution.
- The slides work with any font, but are especially designed with Georgia and Verdana as serif and sans-serif fonts. On Macintosh, the Geneva, Times, and New York fonts are specified as fallbacks. These slides have currently been tested only on Windows 98.
Switching style sheets
These slides have been bundled with two style sheets. The default style sheet, opoint2.css, generates slides with static, complete content.
The alternate sheet, opoint.css, is used by the presenter. With opoint.css, when a slide loads, it contains grey text on a darker grey background. Moreover, the text is slightly shifted off the left edge of the screen. This is specifically intended to minimize the visual distraction of text until the presenter is ready to reveal each point. To reveal the text, click on it.
If you have a strange desire to use the slides in a presentation, enable the alternate slide sheet with the following steps:
- 1. Rename opoint2.css to "opoint1.css".
- 2. Rename opoint.css to "opoint2.css".
- 3. Reload the slide.
Navigation
To navigate between slides, click on the classic VCR-style symbols at the top of the slide: << < § >. ( The § symbol takes you to the "agenda" slide; there is presently no table of contents.) If a symbol lacks an underline, that means the hyperlink has not been enabled (for instance, "<" on the first slide is disabled, since there is no previous slide).
00
Introduction to the W3C DOM, Level 1
by Mitch Gould, human factors engineer
- General Picture, Forest Grove, Oregon
Adapted from: "Human Factors Programming with the DOM" (in prep)
- http://www.generalpicture.com.
Netscape "Gecko CodeStock"
- September 21-22, 1999 - Mountain View, CA
01
Agenda
Learn DOM-1 by example
- The problems of Dynamic HTML in Version-4 browsers
- A simple demo of DOM-1 in action
- An overview of the DOM-1 demo
- Highlights: some important DOM methods
- More detailed demo step-through
- Notes on the future
02
Thesis: DOM-1 is Dynamic HTML "done right."
Dynamic HTML in Netscape and Microsoft Version-4 Browsers
- Architecturally flawed API with serious incompatibility
Unified DOM in Netscape and Microsoft Version-5 Browsers
- An API for both HTML and XML
- Architecturally rigorous API, substantially compatible
- Preserves some DHTML as "DOM-0"
- DOM-1 will be both familiar and strange
03
'Dynamic HTML' is a Troublesome API"
Problems with Dynamic HTML
- Different objects - the great LAYER/IFRAME divide
- Different properties -- such as innerHTML
- Different object hierarchies -- such as document.all[]
- For example...
04
DHTML example: Change the content of a DIV
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function simpleLayerWrite(id,text) {
if (ns4) {
var lyr = document.layers[id].document
lyr.open()
lyr.write(text)
lyr.close()
}
else if (ie4) document.all[id].innerHTML = text
}
05
DOM-1 example: Dynamic HTML "done right."
Addresses the problems of Dynamic HTML
- Use the same objects: IFRAME, not LAYER
- Use the same properties (and perhaps innerHTML in final DOM-2?)
- Use the same object hierarchies
- For example...
06
(Use this page only in Version-5 Netscape or Microsoft browsers.) A simple demonstration of the model/view/controller pattern and the use of the W3C's standard Document Object Model. Test (1) first, and then (2).
Oh dear! I shall be too late.
Curiouser and curiouser!
Who are -you-?
We're all mad here.
Twinkle, twinkle, little bat.
Off with her head!
I make you a present of everything I've said...
Once, I was a real Turtle.
Sentence first--verdict afterwards.
07
A DOM Compliance Badge for Your Pages
Use freely on DOM-compliant scripted pages
- Design: General Picture
- Source: Alice in Wonderland
- Artist: John Tenniel
- (It's a gryphon)
08
DOM-1 example: page code
Dynamic Table (Use this page only in Version-5 Netscape or Microsoft browsers.) A simple demonstration of the model/view/controller pattern and the use of the W3C's standard Document Object Model. Test (1) first, and then (2).
09
The DOM Is Dynamic
The table is created when the page loads. The two buttons trigger...
- ...refreshView() - to update the table contents dynamically.
- ...destroyView() - to dismantle table dynamically.
- (Note: dynamic documents demand a powerful "reflow" engine for layout!)
- These custombuilt functions are found in mvctable.js
10
An MVC Digression
Separate presentation from content
- then display on devices with different display capabilities.
- use a swappable database -- the "model"
- use a swappable display component -- the "view"
- connect the model and view with a "controller"
11
The Goal of MVC
Code reuse under different circumstances
- model: a standard (swappable) JavaScript array
- view: standard (swappable) HTML elements
- controller: custom code, not generally swappable
12
Anatomy of the script - mvctable.js
Split into sections for easy reference
- Data-initialization section
- User-interface section
- DOM-tree navigation/utilities section
- Load-handler section
13
Initialization
Load the quotations and their sources
- Set up the string arrays
14
Initialization code
var datacount = 0
model = new Array()
// Allocate the first dataset, a
// set of quotations, from this array.
arrayquotes = new Array(
"Oh dear! I shall be too late.",
... and so on ...
"Sentence first--verdict afterwards.")
// When a link is clicked, the
// quotations' sources will be revealed
// from this array.
arraysources = new Array(
"White Rabbit",
"Alice",
... and so on ...
"Red Queen")
15
Controller functions
Philosophically, the controller binds the user to the data by...
- ...initializing the model.
- ...initializing the view, using DOM-1.
- ...refreshing the model and view with updated values.
- ... destroying the view upon request.
16
Controller code
// Establish a new data model
// and assign it to a new view.
function startController() {
... details later ... }
// Copy the specified dataset
// into the model.
function refreshModel(arraycurrent) {
... details later ... }
// This sample produces a 1-column table.
// Multi-column tables are more complex.
function createView(bodyelement, themodel) {
... details later ... }
// Refresh the model first, then the view.
function refreshView(dataset) {
... details later ... }
// One can also destroy HTML objects
// using the DOM.
function destroyView() {
... details later ... }
17
DOM Utilities
Encapsulate lower-level details
- DOM-1 is somewhat cumbersome to use.
- But these methods, once written, can be reused.
- One often needs to climb the tree to find an object.
18
Utilities code
// The recursive nature of this algorithm
// reflects an essential fractal nature of
// documents.
function replaceAllText(startelem) {
... details later ... }
// Many operations require one to start
// from the document's body element.
function getBody()
{
if(navigator.appName != "Netscape") {
resultElement = document.body;
} else {
resultElement =
document.getElementsByTagName("body").item(0);
}
return resultElement;
}
// Utility function to overwrite text nodes.
function setText(tagToSet, valueToSet) {
tagToSet.nodeValue = valueToSet
}
19
Loader
Start the controller
- Once the page has fully loaded.
20
Loader code
// This can't start until the page loads.
// Note: do NOT use a paren () on this function name.
window.onload = startController
21
W3C established a DOM taskforce
W3C = "UN" to the "browser war"
- DOM = design by committee (arrrgh!).
- DOM syntax changed frequently.
- DOM-1 specification is now finalized.
- DOM-2 specification is being completed.
- Stay tuned at: http://www.w3.org/dom/
22
Documents as fractals
Like a tree, a document has 'nodes'.
- A tree (or document) begins with a root.
- Its main part is a trunk ( = 'body' or = 'parent').
- It has branches ( = 'children').
- It has twigs ( = 'children').
- Ending in nuts or leaves ( = 'no children').
23
Diagram: Anatomy of a Document (body not expanded)
(diagram)
24
What Is a Node?
The 'atomic unit' of a document.
- A node can have child notes (except terminal nodes, such as text-data).
- A node has parent nodes (except for root, which is parent of all others).
- Root = 'html' or 'xml'.
25
Some of DOM's Nodes
Node type Remarks
Document the document itself
Document Fragment some (or all) of a document
Node an element, attribute, entity, or text
Element another element, text, a comment, etc
Text actual document content
Attribute name="value" pair such as IMG's 'src'
Processing instruction instructions for an XML parser
Comments page-author comments
Cdata section characters that do not include markup
Entity a token to be expanded into a replacement string
Entity Reference the token prefixed with the & character
Document Type provides collections of entities within that document
26
Document Fragments
Two features central to "Cut & Paste" for Dynamic HTML
- Use this node to move chunks around in the document.
- A Document Fragment need not be "well formed".
27
Updating Content
Must use a tree-climbing algorithm...
- ... when the ID attribute is not available on the desired object.
- ... it will accept a branch node as a starting-point...
- ... and travel from there, recursively through the 'twigs'...
- ... testing the type of each node it finds.
28
Getting the Document Body
The DOM getBody() function
- is heavily used
- frequently provides the start-point when searching for objects.
29
The Power of DOM-1
DOM-1 far exceeds the power of "DHTML."
- Create, attach, destroy elements
- Copy/paste part of the document
- Harvest the entire text content
- Search for a string
- Search tags for a given attribute
30
Members of the DOM-1 API
DOM exposes
- Objects
- Collections of objects
- Properties of objects
- Methods of objects
31
Selected DOM-1 'Document' Methods
Signature Remarks
createElement(tagName) creates a new tag.
createDocumentFragment() creates a new DocumentFragment.
createTextNode(data) creates new content for the document.
createAttribute(name) creates an attribute for a tag.
getElementsByTagName(tagname) returns a list of matching nodes (NodeList).
32
Selected DOM-1 'HTMLDocument' Methods
An HTMLDocument object has these methods in addition to the methods of Document.
Signature Remarks
open() Opens a document for new content.
close() Closes a document.
write(text) Appends the text to the open document.
writeln(text) Appends text and a new line to the open document.
getElementById(elementId) Returns the element with the given ID.
33
Selected DOM-1 'Node' Methods
Signature Remarks
insertBefore(newChild, refChild) Inserts a child node into the document before the given node.
replaceChild(newChild, oldChild) Replaces the old node with the new node.
removeChild(oldChild) Removes the child node from the document.
appendChild(newChild) Adds the node to the document.
hasChildNodes() Returns true if the node has children.
cloneNode(deep) Generates a copy of the tree under the given node.
34
Selected DOM-1 'Element' Methods
An Element object has these methods in addition to the methods of Node.
Note: some of these tasks are more easily accomplished using familar "DOM-0" functions.
Signature Remarks
getAttribute(name) Gets the value of the named attribute.
setAttribute(name, value) Sets the value of the named attribute.
removeAttribute(name) Removes the named attribute.
getElementsByTagName(name) returns a list of matching nodes (NodeList).
35
Creating the view
Create nodes with createElement() and createTextNode()
- But it's very easy to build invalid tree structures.
- An author must understand the document branches.
- For instance, a well-formed table needs TBODY.
- Without adding to TBODY, table additions are unpredictable.
36
How to add a table
createView() creates table-row and -cell elements
- and appends them as children to TBODY
- note use of familiar DOM-0 to set attributes
- The example code follows...
37
Table creation code
function createView(bodyelement, themodel) {
table = document.createElement("TABLE")
table.border = 1
table.id = "viewtable"
tablebody = document.createElement("TBODY")
for(var i=0; i < model.length; i++)
{
currentRow = document.createElement("TR")
currentCell = document.createElement("TD")
currentCell.appendChild(document.createTextNode(model[i]))
currentRow.appendChild(currentCell)
tablebody.appendChild(currentRow)
}
table.appendChild(tablebody)
bodyelement.appendChild(table)
return table
}
38
Notes on table creation
Each cell is filled with model data and appended to row
- table rows are appended to the table body
- table body appended to table
- completed table appended to document body
39
Reusability with the MVC pattern
MVC is for repurposability
- createView() provides a a table View
- ... but could be extended for a Select object...
- ...or extend for a TextArea object...
40
Responding to the User
The view requests a table refresh
- refresh the model first, THEN the view
- copy the currently-selected data into the model
- replace the cells' text with the model
- use the following utility functions
41
Table Refresh Code
// Copy the specified dataset into the model.
function refreshModel(arraycurrent) {
// Populate model with current datastore.
for(var i=0; i < arraycurrent.length; i = i + 1)
{
model[i] = arraycurrent[i]
}
return model
}
// Refresh the model first, then the view.
function refreshView(dataset) {
// Populate the model with new data.
refreshModel(dataset)
tablebody =
document.getElementsByTagName("TBODY").item(0)
var count = 0
replaceAllText(tablebody)
}
42
A Real MVC Application?
This is only a toy application.
- real MVC would edit the data
- but as in real MVC, changes to the data
- go to the model first, are then copied to view
43
How to Edit with Nodes
Some DOM methods to manipulate nodes are:
- cloneNode()
- removeNode()
- replaceNode()
- swapNode()
These methods provide functionality for Copy, Cut, Paste, etc.
44
How to Destroy a Node
If the object has an ID, it's not necessary to navigate.
function destroyView() {
objecttodestroy =
document.getElementById("viewtable")
body = getBody()
body.removeChild(objecttodestroy)
// Now destroy the buttons.
objecttodestroy =
document.getElementById("whosaid")
body.removeChild(objecttodestroy)
objecttodestroy =
document.getElementById("goaway")
body.removeChild(objecttodestroy)
}
45
Thesis: DOM-1 is Dynamic HTML "done right."
Dynamic HTML in Netscape and Microsoft Version-4 Browsers
- Architecturally flawed, serious incompatibility
Unified DOM in Netscape and Microsoft Version-5 Browsers
- Both HTML and XML
- Architecturally rigorous, substantially compatible
- Preserves some DHTML as "DOM-0"
- DOM-1 will be both familiar and strange
46
DOM: A Foundation for Distributed Computing
WWW-Next Generation, Based on DOM
- W3C's fundamental data interchange architectures: XML, XHTML, RDF
- Netscape's distributed application architectures: XUL and AOM
- Multimedia and wireless architectures: SMIL, SVG, and WAP
- Your innovation goes here.............?
47
You get the general picture™
human factors + programming
- Mitch Gould, human factors engineer
- operating in greater metro Portland, Oregon
- in preparation: Human Factors Programming with the DOM
- Thanks to Netscape for allowing me to participate.
(Use this page only in Version-5 Netscape or Microsoft browsers.) A simple demonstration of the model/view/controller pattern and the use of the W3C's standard Document Object Model. Test (1) first, and then (2).