javascript

C H A P T E R 7
■ ■ ■
Traversing and Modifying the
DOM Tree
One of my favorite books as a child was Where the Wild Things Are by Maurice Sendak. If you are not
familiar with the story, it goes like this: one night, a little boy named Max, dressed in a wolf costume,
misbehaves and is sent to bed without supper. There, a sea, a wild forest, and mysterious creatures
spring from his imagination. Max sails to the land of the wild things, who crown him king. But even
though the creatures do his bidding, Max grows hungry for love. So, he sails home to find his supper
waiting for him, still hot.
In 2009, Spike Jonze directed a film adaptation of Where the Wild Things Are. As the book contains
just 338 words, Jonze and cowriter Dave Eggers obviously had to add dialogue. For example, prior to the
wild rumpus in the book, Jonze and Eggers have Max blurt, “I’ll be on my own side. By myself.” Then
later, as warring factions emerge, they have Max wonder, “How do I make everyone OK?”
Those two quotes came to mind as I wrote this chapter. Though Internet Explorer, Firefox, Safari,
and Opera faithfully implement ECMAScript, a standard we explored in the first six chapters, such is not
the case with DOM, a standard we will explore in this chapter and the next two. Not entirely anyway.
Firefox, Safari, and Opera faithfully implement DOM, too. Internet Explorer, on the other hand, does
not—at least not always. For some DOM features, Internet Explorer abides by DOM. For others, it blurts,
like little Max, “I’ll be on my own side. By myself.”
That’s the bad news. Now for the good. There’s no need for you to wonder like Max, “How do I make
everyone OK?” That is to say, how to solve the problem of warring browser factions in regard to DOM. By
way of feature testing, we will script DOM in the standard way for Firefox, Safari, or Opera, but in a
proprietary way for Internet Explorer. Note too that the three DOM chapters were written in order of
increasing Internet Explorer childishness. In other words, we will have to do some cross-browser
scripting in this chapter, a little more in Chapter 8, and quite a bit in Chapter 9. But you will be battle
hardened by then!
DOM Tree
DOM provides a way for JavaScript to represent the nested tags in HTML or XML markup as a tree of
nested objects, referred to as nodes. Like any other JavaScript value of the object datatype, a node is a
container for related variables and functions. Moreover, node members provide a way for scripters like
us to query and manipulate markup, doing things like finding, creating, or deleting content. But just
remember that a node is an object. Everything you learned in Chapter 5 works for a node.
Why not just call a node an object? Things are already confusing enough with having to remember
that arrays and functions are of the object datatype. Now we’re adding nodes to the list. Enough already!
Now before you get your dander up, bumpkin, there is a reason for saying node rather than simply
object. Not a bad one either. DOM is not just for JavaScript. Many other languages use it too, such as
Java, PHP, Perl, and so on. Those languages have their own datatypes. So, saying node rather than
255