Java Reference
In-Depth Information
bodyElement = headingElement.nextSibling;
}
alert(bodyElement.tagName);
Here you check to see what the
nodeType
of the
nextSibling
of
headingElement
is. If it returns
3
, (
nodeType 3
is a text node), you set
bodyElement
to be the
nextSibling
of the
nextSibling
of
headingElement
; otherwise, you just set it to be the
nextSibling
of
headingElement
.
You use an
alert
to prove that you are now at the
<body/>
element:
alert(bodyElement.tagName);
The
<body/>
element in this page also has two children, the
<h1/>
and
<p/>
elements. Using the
firstChild
property, you move down to the
<h1/>
element. Again you check whether the child node is whitespace for
standard‐compliant browsers. You use an
alert
again to show that you have arrived at
<h1/>
:
if (bodyElement.firstChild.nodeType == 3) {
h1Element = bodyElement.firstChild.nextSibling;
} else {
h1Element = bodyElement.firstChild;
}
alert(h1Element.tagName);
After the third alert, the style will be altered on your first element, changing the font to Arial:
h1Element.style.fontFamily = "Arial";
You then navigate across to the
<p/>
element using the
nextSibling
property, again checking for whitespace:
if (h1Element.nextSibling.nodeType == 3) {
pElement = h1Element.nextSibling.nextSibling;
} else {
pElement = h1Element.nextSibling;
}
alert(pElement.tagName);
You change the
<p/>
element's font to Arial also:
pElement.style.fontFamily = "Arial";
Finally, you use the
previousSibling
property to move back in your tree to the
<h1/>
element and this
time change the font to Courier:
if (pElement.previousSibling.nodeType == 3) {
h1Element = pElement.previousSibling.previousSibling;
} else {
h1Element = pElement.previousSibling;
}
h1Element.style.fontFamily = "Courier";
