Java Reference
In-Depth Information
Figure 12-9
You've hopefully made this example very transparent by adding several alerts to demonstrate where
you are along each section of the tree. You've also named the variables with their various elements, to
give a clearer idea of what is stored in each variable. (You could just as easily have named them
a
,
b
,
c
,
d
, and
e
, so don't think you need to be bound by this naming convention.)
You start at the top of the script block by retrieving the whole document using the documentElement
property.
var htmlElement = document.documentElement;
The root element is the
<html/>
element, hence the name of your fi rst variable. Now if you refer to your
tree, you'll see that the HTML element must have two child nodes: one containing the
<head/>
element
and the other containing the
<body/>
element. You start by moving to the
<head/>
element. You get
there using the
firstChild
property of the
Node
object, which contains your
<html/>
element. You
use your fi rst alert to demonstrate that this is true.
alert(headingElement.tagName);
You r <body/> element is your next sibling across from the <head/> element, so you navigate across by
creating a variable that is the next sibling from the <head/> element.
if (headingElement.nextSibling.nodeType == 3)
{
bodyElement = headingElement.nextSibling.nextSibling;
}
