The Document Object Model lets you access and manipulate the contents of Web pages using JavaScript. By using the DOM, you can do wonderful things like:
- Create tabbed Web pages
- Create expandable/collapsible (“accordion”-style) Web page elements
- Generate Web page content dynamically (on the fly)
In this introductory article, you learn about the concept of the DOM, and how it’s used to access Web page elements from within JavaScript.
The DOM concept
From a JavaScript perspective, the Document Object Model uses JavaScript objects to represent the various parts that make up a Web page. For example, a whole Web page is represented by a Document object, while elements within the page — body, h1, 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 HTML, HEAD, BODY, TITLE and H1 are all DOM Element nodes, and "My Web Page" and "The Widget Company" are DOM Text nodes.
The H1 element node has a DOM Attribute node associated with it, which has a name of "class" and a value of "intro".
The HTML element node also has three DOM Attribute nodes: "xmlns", with value of "http://www.w3.org/1999/xhtml"; "xml:lang", with a value of "en"; and "lang", also with a value of "en".
The DOM and JavaScript
You can access the various element, attribute and text nodes in a DOM document as JavaScript objects, allowing you to read and alter the contents of nodes, as well as add new nodes to the tree or remove nodes from the tree.
Over the coming series of tutorials, you’ll learn how to manipulate the DOM using JavaScript, and use your new-found knowledge to create powerful, dynamic Web pages.
To kick things off, in the next tutorial you learn how to use JavaScript to retrieve DOM elements in a Web page. Enjoy!
Leave a Reply