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:

          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.

em

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 id="ranch">
I am a <em>horse</em>, but I wish I
was a <span id="tiger">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>




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