Tutorial: Introducing the JavaScript DOM
Level: Beginner. Published on 3 October 2008 in The Document Object Model
What is the Document Object Model, and why is it useful? This article gives you a gentle introduction to this powerful JavaScript feature.
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. Enjoy!
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!