Java Reference
In-Depth Information
<HTML>
<HEAD>
<BODY>
<TITLE>
<SPAN>
<TABLE>
'This is a
test page'
'Below is
a table'
<TR>
<TR>
<TD>
<TD>
<TD>
<TD>
'Row1
Cell1'
'Row1
Cell2'
'Row2
Cell1'
'Row2
Cell2'
Figure 12-3
The top level of the tree is simple enough; the <html/> element contains <head/> and <body/> ele-
ments. The <head/> element in turn contains a <title/> element and the <title/> element contains
some text. This text node is a child node that terminates the branch (a leaf node). You can then go back
to the next node, the <body/> element node, and go down that branch. Here you have two elements con-
tained within the <body/> element, the <span/> and <table/> elements. Although the <span/> element
contains only text and terminates there, the <table/> element contains two rows (<tr/>), and the two
<tr/> elements contain two table cell (<td/>) elements. Only then do you get to the bottom of the tree
with the text contained in each table cell. Your tree is now a complete representation of your HTML code.
The Core DOM Objects
What you have seen so far has been highly theoretical, so let's get a little more practical now.
The DOM provides you with a concrete set of objects, properties, and methods that you can access through
JavaScript to navigate the tree structure of the DOM. Let's start with the set of objects, within the DOM,
that is used to represent the nodes (elements, attributes, or text) on your tree.
Base DOM Objects
Three objects, shown in the following table, are known as the base DOM objects.
Object
Description
Node
Each node in the document has its own Node object
NodeList
This is a list of Node objects
NamedNodeMap
This provides access by name rather than by index to all the Node objects
