4.16. Frequently Asked Questions? | Q: | So as long as my users aren't running Internet Explorer, I can use the Node object, right? | | A: | 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. |
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? Just Do It Solutions 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: function guess() { var whatAmI; var element = document.documentElement.lastChild;The document element is <html>. It's first child is <head>, and it's last child is <body>. alert("I am a " + element.nodeName); var anotherElement = There's only one <h1> in the document... document.getElementsByTagName("h1")[0]; ...and elements don't have a nodeValue. alert("I am a " + anotherElement.nodeValue); var child = anotherElement.firstChild; alert("I am a " + child.nodeValue);The first (and only) child of <h1> is the text node with the text "I am a cow". element = You're used to writing code like this by now. document.getElementById("tiger").lastChild; The <span> elements's last child is its text, which is "tiger". alert("I am a " + element.nodeValue); alert("I am a " + element.parentNodeThe text node's parent is the <span> element. .getAttributeNode You haven't seen this function before, but you can figure it out. It gets the "id" attribute...("id").nodeValue); }...which has a value of "tiger".
Did you get that last one? It's easy to forget that the "element" variable isn't really an element at all! It's a text node, and its parent is the <span> element. If you thought this last line ended up at the <div>, with an "id" attribute of "ranch", it's OK... just make sure you understand why the alert() printed "tiger" before continuing on. Don't worry about capitalization on element names... browsers usually put them all in uppercase. This just means that there's not a value for this property. <html> <head> <title>Who Am I exercise</title> </head> <body> <h1>I am a cow</h1> <div > I am a <em>horse</em>, but I wish I was a <span >tiger</span>. </div> <form> <input type="button" value="What Am I?" onClick="guess();" /> </form> </body> </html> The HTML for this exercise.
These are both "tiger", but the text comes from two different places... the first from the <span>'s text, and the second from the <span>'s "id" attribute. |
|
