The Document Object Model (DOM), Part I - www.docjavascript.com

The Document Object Model (DOM), Part I

One of the Internet's best-kept secret is the Document Object Model (DOM), supported by Internet Explorer 5.0 and up. The DOM is a dream come true for JavaScript programmers. It models HTML documents in a very consistent and intuitive way. It also provides you with an interface to access, navigate, and manipulate your page, according to this model. The DOM allows you to access and update both the content, structure, and style of a document. In this column we'll teach all about the DOM's structure, how to access and update its properties, and how to manipulate it.

The power of the the Document Object Model stems from its position as a standard of the World Wide Web Consortium (W3C). This position ensures that most browsers and platforms will support it eventually. The development of the DOM aligns with the trend to provide more interactive content on the Web. The only way to provide this interactive content is by allowing HTML to be dynamically manipulated. The Document Object Model makes this challenge much easier to achieve.

We present the DOM in several parts. First we'll explain the structure of the DOM and the logic behind it. Then we'll demonstrate these concepts through a thorough analysis of a simple document and a table. The DOM is based on a tree structure. Those of you that took CS201 (Data Structures and Algorithms) may skip some of the pages that explain the tree structure.

In particular, you'll learn:

• How to distinguish between the DOM and the DHTML object model.
• How to use DOM's properties.
• How to analyze the object structure of a simple HTML page.
• How to navigate the object structure of a simple HTML page.
• How to draw the object structure of a simple HTML page.
• How to analyze the object structure of a table.
• How to navigate the object structure of a table.
• How to draw the object structure of a table.