Moving around in a DOM tree

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:


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.
 If you want
to go straight to the first child, use the firstChild property of the
<div>'s node object.
 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 type




element node


Element nodes all have a nodeName.


The nodeValue for an element node is undefined.


element node




text node


Text nodes do not have a nodeName.


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 =
 alert("I am a " + element.nodeName);
 var anotherElement =                            ________________________
 Write what the alert() prints out here...
 alert("I am a " + anotherElement.nodeValue);
 var child = anotherElement.firstChild;          ________________________
 alert("I am a " + child.nodeValue);
 element =                                       ________________________
 alert("I am a " + element.nodeValue);           ________________________
 alert("I am a " +
        .getAttributeNode("id").nodeValue);      ________________________

<title>Who Am I exercise</title>
<h1>I am a cow</h1>
<div id="ranch">
I am a <em>horse</em>, but I wish I
was a <span id="tiger">tiger</span>.
<input type="button" value="What Am I?"
onClick="guess();" />
</body> Here's the HTML to use for the exercise.

 Python   SQL   Java   php   Perl 
 game development   web development   internet   *nix   graphics   hardware 
 telecommunications   C++ 
 Flash   Active Directory   Windows