2006-Head Rush Ajax - PDF Free Download (2024)

Answers on page 240.

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.firstChild; alert(“I am a “ + child.nodeValue); element = document.getElementById(“tiger”).lastChild; alert(“I am a “ + element.nodeValue); alert(“I am a “ + element.parentNode .getAttributeNode(“id”).nodeValue); }

Q: I understand text, and elements, and branches, but I’m still confused about exactly what a “node” is.

attributes, even comments. Since each piece of markup has some common properties, like a parent, and in most cases a name and children, the DOM groups these common properties into a Node object. Then, each different type of node adds its own unique properties to the common properties in the Node type. For example, element nodes have a getAttribute() and setAttribute() method, because only elements can have attributes. But element nodes get the parent and childNodes properties from the Node object, since that functionality is shared by several different types of nodes.

But some nodes don’t have a name. What happens if you use the nodeName property on something like a text node?

If you try to use a property on a node where that property doesn’t apply, you’ll get a value like “null” or “undefined”. That’s the DOM’s way of telling you that it didn’t know what you meant, or at least that what you meant didn’t match up with the DOM tree the browser created from your markup. So if you tried to access the nodeName property on a text node, you’d get an undefined value because, unlike elements, text nodes don’t have names. Or, if you tried to use nodeValue on an element, you’d get an undefined value, because elements don’t have values. An element can have attributes, but any text within the element will be in the element’s child text nodes, and not available through the element’s nodeValue property.

I like most of this DOM stuff so far, but all this null value and undefined stuff kind of freaks me out. Can’t I just ask the node if it’s an element, or text, or whatever?

You can! (well, sort of) Every node has a property called nodeType, along with the nodeName and nodeValue proeprties that you’ve already seen. The nodeType property returns a number, and that number maps to a value stored in the Node class. There’s a value for each type of node, so you can use these values to figu e out exactly what kind of node you’re working with, like this:

property. Here’s the nodeType It returns a number...

ss.

if (someNode.nodeType == Node.ELEMENT_NODE) { // Do something with the element node

Once you know what type of node you have, you can avoid using properties that would return null values.

There are numbers defined for all the node types, including elements, text, and attributes.

Some browsers don’t recognize Node Unfortunately, some web browsers don’t support the Node class in your JavaScript. Your code won’t run, and you’re back to dealing with errors and null values.

All browsers support the nodeType proeprty...

...but several browsers report an error right here.

if (someNode.nodeType == Node.ELEMENT_NODE) { // Do something with the element node

Here’s IE reporting that it doesn’t recognize the Node object in your code.

Q: So as long as my users aren’t running Internet Explorer, I can use the Node object, right?

Actually, you shouldn’t ever use the Node object... at least not until all major browsers support the Node object. Even if you don’t think your users are running IE, it’s still the world’s most popular browser (by a long-shot). In the next chapter, you’’ll see that you can get the same results with a little more work, and end up with code that works on all browsers. you’re on your way �

Cool! I can definitely see there are some weird things about the DOM, but I think I’m starting to get the hang of it. But what ever happened to that coding challenge you mentioned?

You’re ready for the challenge... The DOM is a pretty big topic, and it’s taken us almost 40 pages just to explain how it works. But now you’ve got some mad DOM skills, and are almost ready to take on building a DOM app... and taking on the coding challenge. Before you do, though, check out the exercise solutions on the next few pages, and make sure you understsand everything so far. Then, turn to Chapter 4.5, and we’ll start working on a DOM app all our own.

Yes, you read that right. There’s a Chapter 4.5. And you’re ready for it ” now, so close your eyes, chant “D-O-M a few times, and let’s get to coding.*

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? you’re on your way �

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:

The document element is . It’s first child is , and it’s last child is .