HTML and CSS Reference
In-Depth Information
Looking Up Elements in the Document
The preceding lesson discussed the
document
object a little bit, and mentioned that it provides access to the full contents of
the web page. The representation of the page that is accessible via JavaScript is referred
to as the
Document Object Model
, or
DOM
. The entire page is represented as a tree,
starting at the root element, represented by the
<html>
tag. If you leave out the
<html>
tag, the browser will add it to the DOM when it renders the page. The DOM for this
page is shown in Figure 15.6.
FIGURE 15.6
The DOM for the
FAQ page, shown
in Firebug.
There are a number of ways to dig into the DOM. The browser provides access to the
parent of each element, as well as its siblings, and children, so you can reach any ele-
ment that way. However, navigating your way to elements in the page that way is
tedious, and there are some shortcuts available.
These shortcuts, methods that can be called on the
document
object, are listed in
Table 15.1.
TABLE 15.1
Methods for Accessing the DOM
Method
Description
Retrieves a list of elements with the supplied tag
name. This can also be called on a specific element,
and it will return a list of the descendants of that ele-
ment with the specified tag name.
getElementsByTagName(name)
