Java Reference
In-Depth Information
The rules for creating trees are simple. You start at the top of the tree with
the document and the element that contains all other elements in the page.
The document is the
root node
. A
node
is just a point on the tree representing
a particular element or attribute of an element, or even the text that an
element contains. The root node contains all other nodes, such as the DTD
declaration and the root element (the HTML or XML element that contains all other elements). The
root element should always be the
<html/>
element in an HTML document. Underneath the root
element are the HTML elements that the root element contains. Typically, an HTML page will have
<head/>
and
<body/>
elements inside the
<html/>
element. These elements are represented as nodes
underneath the root element's node, which itself is underneath the root node at the top of the tree
(see Figure 9-1).
<html>
<head>
<body>
figure 9-1
The two nodes representing the
<head/>
and
<body/>
elements are examples of
child nodes
, and the
<html/>
element's node above them is a
parent node
. Because the
<head/>
and
<body/>
elements
are both child nodes of the
<html/>
element, they both go on the same level underneath the parent
node
<html/>
element. The
<head/>
and
<body/>
elements in turn contain other child nodes/HTML
elements, which will appear at a level underneath their nodes. So child nodes can also be parent nodes.
Each time you encounter a set of HTML elements within another element, they each form a separate
node at the same level on the tree. The easiest way of explaining this clearly is with an example.
an example htML page
Let's consider a basic HTML page such as this:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>My Heading</h1>
<p>This is some text in a paragraph.</p>
</body>
</html>
The
<html/>
element contains
<head/>
and
<body/>
elements. The
<body/>
element contains an
<h1/>
element and a
<p/>
element.
The
<h1/>
element contains the text
My Heading
. When you reach
an item, such as text, an image, or an element, that contains no
others, the tree structure will terminate at that node. Such a node
is termed a
leaf node
. You then continue to the
<p/>
node, which
contains some text, which is also a node in the document. You can
depict this with the tree structure shown in Figure 9-2.
<html>
<head>
<body>
<p>
<h1>
“This is
some text in
a paragraph”
“My Heading”
figure 9-2
Simple, eh? This example is almost too straightforward, so let's move
on to a slightly more complex one that involves a table as well:
<!DOCTYPE html>
<html lang="en">
<head>
