Head Rush Ajax

you’re on your way �

239

the document object model

The Great Chapter 4 Coding Challenge

Write a killer web application that uses the

Document Object Model to create a dynamic

user interface, without writing any Ajax code.

* OK, we admit it. This chapter just got so stinking big that

we broke it into two chapters. But then, the Great Chapter 4

Coding Challenge became the Great Chapter 5 Coding Challenge,

and nobody liked that nearly as much. So we called the next

Chapter 4.5, and now we can still say ...

...(drum roll) ...

the Great Chapter 4 Coding Challenge. Who said there couldn’t

be drama in a programming book?

240

Chapter 4

You’ve got to keep up with what type of node you’re working on, and always know where in the

DOM tree your variables are pointing. Did your answers match up with ours? Let’s take a look:

function guess() {

var whatAmI;

var element =

document.documentElement.lastChild;

alert(“I am a “ + element.nodeName);

var anotherElement =

document.getElementsByTagName(“h1”)[0];

alert(“I am a “ + anotherElement.nodeValue);

var child = anotherElement.rstChild;

alert(“I am a “ + child.nodeValue);

element =

document.getElementById(“tiger”).lastChild;

alert(“I am a “ + element.nodeValue);

alert(“I am a “ +

element.parentNode

.getAttrib ...