- Create tabbed Web pages
- Create expandable/collapsible (“accordion”-style) Web page elements
- Generate Web page content dynamically (on the fly)
The DOM concept
Document object, while elements within the page —
p, and so on — are represented by
Element objects. The page elements are represented as a tree, with the
Document object at the top.
Elements, attributes and text nodes
Every part of a Web page is represented in the DOM by a node. The most common nodes you’ll encounter are element nodes, attribute nodes, and text nodes. In addition, the whole document is represented by a document node. Consider the following HTML markup:
<h1 class="intro">Introducing the Widget Company</h1>
In the above example, the
h1 element is a DOM Element node, the
class attribute is a DOM Attribute node, and the
Introducing the Widget Company text is a DOM Text node.
The DOM tree
A Web page is represented in the DOM as a tree of nodes. For example, here’s the markup for a simple XHTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My Web Page</title> </head> <body> <h1 class="intro">The Widget Company</h1> </body> </html>
The above Web page is represented in the DOM by the following tree:
Document | HTML ______________|______________ | | HEAD BODY | | TITLE H1 | | "My Web Page" "The Widget Company"
In this tree,
Document is a DOM Document node, while
H1 are all DOM Element nodes, and
"My Web Page" and
"The Widget Company" are DOM Text nodes.
H1 element node has a DOM Attribute node associated with it, which has a name of
"class" and a value of
HTML element node also has three DOM Attribute nodes:
"xmlns", with value of
"xml:lang", with a value of
"lang", also with a value of