javascript

CHAPTER 9 ■ LISTENING FOR EVENTS
358
As its name implies, ElementTraversal is designed for traversing Element nodes. So,
firstElementChild, lastElementChild, previousElementSibling, and nextElementSibling will contain an
Element node or null (and never a Text, Comment, or any other kind of node). Note that
childElementCount differs from childNodes.length in that it contains just the number of child Element
nodes rather than the overall number of child nodes.
Therefore, for Internet Explorer 9, Firefox, Safari, Chrome, and Opera, we can rework
traverseTree() with firstElementChild and nextElementSibling to replace firstChild and nextSibling.
The two function literals in the ?: expression differ only by those identifiers:
var traverseTree = document.documentElement.firstElementChild ?
function traverseTree (node, func) {
func(node);
node = node.firstElementChild;
while (node !== null) {
traverseTree(node, func);
node = node.nextElementSibling;
}
} :
function traverseTree (node, func) {
func(node);
node = node.firstChild;
while (node !== null) {
traverseTree(node, func);
node = node.nextSibling;
}
} ;
Note that the boolean expression, document.documentElement.firstElementChild, queries
firstElementChild for the Element node. That would be the Element node.
Why not simply query the firstElementChild of the Document node? We could see whether
document.firstElementChild refers to the Element node. That’s a bad idea: ElementTraversal is
implemented only by Element nodes. So although all 12 node types have a firstChild member, only an
Element node has a firstElementChild member, too.
Hmm. If it were up to me, a Document node would implement ElementTraversal, too. But I do not
write the standards, just about them.
■ Note If you want to wade through the details of the ElementTraversal interface, visit
www.w3.org/TR/ElementTraversal/.
Finding an Element by Class
The next helper function we want to rework is findClass(), which we wrote in Chapter 7 to help us find
an Element node by its class attribute. DOM 3 adds a NodeSelector interface that defines two methods,
querySelectorAll() and querySelector(). Those provide a way to query Element nodes with CSS
selectors. That is to say, querySelectorAll() and querySelector() enable you to query elements in the
same way that you would target them in a CSS rule. So for example, to query the element in our
markup, we could invoke querySelectorAll() in any of the following ways in Firebug: