HTML and CSS Reference
In-Depth Information
In Example 15.1, we will take a walk down the DOM tree, one step at a time, using the
parent/child/sibling nodes to represent each element in the document. The simple lay-
out of the HTML page is drawn in Figure 15.6. You can quickly see that using DOM
properties to navigate the tree can get confusing, and if in any way the structure of the
document changes, then all the nodes properties will have to be reset. We discuss a
quicker more efficient way to get around in the next section.
Because every element in the tree has a parent (other than the root node), a relation-
ship can be established going up or down the tree as long as you know which node and
which children will lead you to the target element you want. The five properties for each
node in the tree are
parentNode
,
firstChild
,
lastChild
,
previousSibling
, and
next Sibling
.
document
<html>
root node
<head>
<body>
<title>
<h1>
“The Nodes”
“Walking with the Nodes”
Figure 15.6
The DOM tree for Example 15.1.
EXAMPLE
15.1
1
<html>
<head><title>The Nodes</title>
<style>
p{font-size: x-large; color:darkblue;
font-style:bold;
}
</style>
</head>
<body>
<h1>Walking with Nodes</h1>
<p>Who knows what node?</p>
<p>
