javascript

CHAPTER 7 ■ TRAVERSING AND MODIFYING THE DOM TREE
256
JavaScript object makes DOM language neutral. Internet Explorer, for example, implements DOM with
COM objects, while Firefox, Safari, and Opera implement DOM with JavaScript objects. For this reason,
DOM objects do not behave like JavaScript objects in Internet Explorer, but do so in Firefox, Safari, and
Opera. So, there’s your first taste of Internet Explorer’s “I’ll be on my own side. By myself.” mischief.
■ Note If you are curious as to what COM objects are, visit the following Wikipedia page:
http://en.wikipedia.org/wiki/Component_Object_Model.
DOM is language-neutral, but it is a pretty loose standard, too. Rather than very specifically
documenting classes, DOM tells Internet Explorer, Firefox, Safari, and Opera what to do by way of
interfaces. Interfaces list methods and members that must be implemented together. Just as an interface
is an intentionally vague blueprint for an object, the JavaScript interpreter for Firefox implements DOM
features differently than the JavaScript interpreter for Internet Explorer or Safari does. Moreover, a node
in the DOM tree can implement more than one interface. For example, a tag from your markup is
represented with an Element node in the DOM tree. Those have all the features listed in the Node,
Element, and HTMLElement interfaces, among others.
With this in mind, in order to know what members and methods are available for you to manipulate
a node with, you have to know which interfaces list those features. Although DOM is comprised of
hundreds of interfaces, we will explore just 11 in this chapter. Did I hear a sigh of relief?
Thought so. Anyway, knowing key interface names will also prove invaluable whenever you need to
look up features in a DOM reference, printed or online. For those reasons, I preface DOM methods and
members with their interface names. For example, the method createElement() is listed in the Document
interface, so I refer to it as Document.createElement(). That way, you know it can be invoked only on a
Document node. Also, you know to look under the Document interface in a DOM reference whenever you
want more information.
Alrighty then, these are the 11 DOM interfaces we will explore in this chapter:
Attr
CharacterData
Document
Element
HTMLCollection
HTMLDocument
HTMLElement
NamedNodeMap
Node
NodeList
Text
Is Every Node the Same?
Every node is not the same; there are 12 different kinds of nodes. But as a DOM scripting beginner, and
even later in life when you are a guru, you will really only ever work with four. First, every tag in your
markup is represented with an Element node. Second, tag attributes like id or href are represented with
Attr nodes. Next, not surprisingly, text content is represented with Text nodes. And finally, the whole
enchilada is represented with a Document node—in other words, the root to the DOM tree is a Document
node. Every other kind of node is a descendant of this root node.