Fall Semester 2002

Lecture Notes Extra: DHTML

DHTML has been a turf in turmoil over the last few years.

Well, I guess one can say that. But things have changed for the better.

Here are some notes from the past whose usefulness has changed over time:

  1. Notes from a Holzner book (1998)
  2. DHTML notes from 2001
  3. A very focused example of fighting browser incompatibilities
This is going to be a short document to be expanded in a few days.

We first describe DOM. We start with an example: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN>
<html>
  <head>
    <title>DOM Nodes</title>
    <script type="text/javascript" language="Javascript">
      function changeGreeting() {
        var theNode = getObj("greeting"); 
        var newGreeting = window.prompt("Type a greeting.", "Yo!"); 
        theNode.firstChild.nodeValue = newGreeting; 
      }
      function getObj(elementID) {
        return document.getElementById(elementID); 
      }
    </script>
  </head>
  <body>
    <p>
      <span id="greeting">Hi!</span> 
      My name is Larry Bird. 
    </p> 
    <p> 
      <a href="javascript:changeGreeting();">Change Greeting</a> 
    </p>
  </body>
</html>
This simple example would be enough for you to finish Homework Four.

But we have two goals:

Here's an API, and a few more examples. The API first (followed by some links).

appendChild()
appendData()
caption
cellIndex
cells
childNodes[]
className
cloneNode()
createCaption
createElement()
createTextNode()
data
deleteCaption()
deleteCell()
deleteData()
deleteRow()
deleteTFoot()
deleteTHead()
disabled
documentElement
firstChild
getAttribute
getElementById
getElementsByTagName()
hasChildNodes()
href
id
innerHTML
insertBefore()
insertCell()
insertData()
insertRow()
lastChild
name
nextSibling
nodeName
nodeType
nodeValue
ownerDocument
parentNode
previousSibling
remove()
removeChild()
replaceChild()
rowIndex
rows[]
setAttribute
specified
splitText()
tagName
tBodies[]
tFoot
tHead
title
value

These are methods and properties of DOM1 that work reliably in modern browsers.

How about those links?

Here they are:

  1. Getting ready for the W3C DOM by Danny Goodman
  2. W3C DOM Developer Central
  3. Level 1 DOM Introduction by Peter-Paul Koch (very slow or inexistent)
  4. DOM technical reports from the W3C
  5. Browser compatibility chart at webreview.com
This document will be updated throughout this week.

But you already have what you need.

Last updated: Sep 3, 2002 by Adrian German for A348/A548