Section 4.13. Moving around in a DOM tree | Head Rush Ajax (Head First)

4.13. Moving around in a DOM tree

You already know how the document object can help you find an element with a particular id attribute, but there are a lot of other ways you can get around in a DOM tree. Since each node has a parent, and most element nodes have children, you can move up and down in the DOM tree using these connections.

Here's part of the DOM tree from page 226; let's look at how you could move around the tree, starting with one of the <div> elements:

           body divNode is the variable name pointing to the <div> in this diagram.divNode.parentNode   You can get the parent of the <div>, which is the <body> element, by using the <div> node's parentNode property. div Start reading HERE! Everything in this diagram starts with this <div>. Here's the <div> that we're starting from. It's a node object in the DOM tree. divNode.childNodes The childNodes property gives you an array of all the <div>'s child nodes. divNode.firstChild     If you want to go straight to the first child, use the firstChild property of the <div>'s node object. divNode.lastChild   You can get to the last child of the <div> with the lastChild property. "Our "            em            " trees are a favorite for nearby neighbors."              "breadth-first" You could use the <em> node's firstChild, lastChild, or childNodes property to get to this text.

Sweet! Now I can find any element I want, move up and down the DOM tree... I'll bet I can get element names and text values, too, right?

The node knows... pretty much everything.

Remember, everything in a DOM tree is a node. Elements and text are special kinds of nodes, but they're still nodes. Anytime you have a node, you can get the name of the node with nodeName, and the value of the node with nodeValue .

You've got to be careful what type of node you're working on, though, or you could end up getting a null value when you're expecting the name of an element or a string of text. An element node has a name, like "div" or "img", but won't have a value. And a text node won't have a name, but it will have a value: the actual text stored in the node.

Let's take a look and see how this works:

node

node type

nodeName

nodeValue

div

element node

"div"

Element nodes all have a nodeName.

null/undefined

The nodeValue for an element node is undefined.

element node

"em"

null/undefined

"breadth-first"

text node

null/undefined

Text nodes do not have a nodeName.

"breadth-first"

The nodeValue of a text node is its text.

Just Do It

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. To help you get some practice, here's a bit of JavaScript code, and some HTML. Your job is to figure out what each alert() prints out. Try this first without running the code on your own... but don't be afraid to type this code in and test it out for yourself if you get stuck.

 function guess() {  var whatAmI;  var element =    document.documentElement.lastChild;  alert("I am a " + element.nodeName);  var anotherElement =                            ________________________  Write what the alert() prints out here...    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);      ________________________ }

 <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> Here's the HTML to use for the exercise. </html>