javascript

CHAPTER 7 ■ TRAVERSING AND MODIFYING THE DOM TREE
278
getElementById. Second, if no element in your markup has the desired id, then
Document.getElementById() returns null. This is what you ought to expect inasmuch as an Element node
is of the object datatype, which is to say its value is stored on the heap. Finally, in the event that more
than one element in your markup has the desired id, which is a markup error,
Document.getElementById() may return null, or it may randomly return one of the elements. Note that,
other than in Internet Explorer prior to version 8, the id parameter is case sensitive in all relevant
browsers. Therefore, for our with an id of "twitter", passing Document.getElementById() the
parameter "Twitter" returns null in Firefox, Safari, Opera, and Internet Explorer 8+. On the other hand,
Internet Explorer 7 or older returns the by mistake. With this in mind, do not give different elements
id attributes that vary only by case, such as "sprite" and "Sprite", since Internet Explorer may consider
those to be the same id.
Finding Elements by Their Tag Names
Oftentimes, you will want to do some stuff to elements with the same tag name. Say you want to turn
every element with a class of "sprite" into a CSS sprite. Rather than traverse the DOM tree with a
function like traverseTree(), simply pass either Document.getElementsByTagName() or
Element.getElementsByTagName() a string indicating the tag name of the elements you want, and
JavaScript will return a NodeList containing those elements for your scripting pleasure. Take care to note
that it is Elements, plural, in getElementsByTagName(), but it’s Element, singular, in getElementById().
So, you can call getElementsByTagName() on either an Element or a Document node. What’s the
difference? If you want JavaScript to return all the elements in your markup that have the same tag
name, go with Document.getElementsByTagName(). On the other hand, if you just want descendants of a
certain element that have the same tag name, meaning you just want to work with a branch of the DOM
tree rather than the whole thing, then turn to Element.getElementsByTagName().
Click Refresh in Firefox (to revert the second to "Facebook") and then click Clear in both
Firebug panels. Let’s try Document.getElementsByTagName() first:
var myElements = document.getElementsByTagName("a");
myElements;
// [a www.twitter.com, a www.facebook.com, a www.flickr.com, a www.linkedin.com]
JavaScript returns a NodeList containing every Element node from the DOM tree. myElements
contains four members. Now let’s try Element.getElementsByTagName() on just a branch of the tree:
myElements = document.getElementById("twitter").getElementsByTagName("a");
// [a www.twitter.com]
Verify your work with Figure 7–12.