HTML and CSS Reference
In-Depth Information
Introducing Nodes
In the last tutorial, you saw how you could work with document objects to retrieve text
strings from and write text strings to Web page elements. The object tree discussed in that
tutorial is a simplified version of a more complete object hierarchy using nodes. A node
represents any object within a Web page or Web browser. Each element tag, element
attribute, and text string is a node, including the element tags in the document's head
section, comment tags, and the
<html>
tag itself. For example, the HTML code
<h1>Table of Contents</h1>
consists of two nodes—one node for the
h1
element and one node for the text string,
Table of Contents
, contained within that element.
The Node Tree
Nodes are arranged into a hierarchical structure called a node tree.
Figure 14-7 shows a
representation of a node tree for a simple HTML document. Note that in the node tree,
each element is treated as a separate node; and within each element, the text is treated
as a node as well.
Figure 14-7
a sample node tree
<html>
<head>
<title>Historic Documents</title>
</head>
<body>
<h1>Dept. of History</h1>
<p>The <b>constitution</b> online.</p>
</body>
</html>
document
html
head
body
title
h1
p
"Historic Documents"
"Dept. of History"
"The"
b
"online."
"constitution"
Nodes in the node tree have a familial relationship—each node can be a parent,
child, and/or sibling of other nodes. This relationship is indicated using the expression
node
.
relationship
where
node
is a currently selected node or object, and
relationship
is the relationship
of another node to the current node. For example, the expression
node
.parentNode
refers to the parent of
node
. In the node tree shown in Figure 14-7, the parent of the
body
node is the
html
node, and the parent of the
html
node is the
document
node,
which is also known as the
root node
.
