Chapter 15. Scripting Documents

Client-side JavaScript exists to turn static HTML documents into interactive web applications. Scripting the content of web pages is the raison d'être of JavaScript. This chapterthe most important in Part II explains how to do this.

Every web browser window (or frame) displays an HTML document. The Window object that represents that window has a document property that refers to a Document object. This Document object is the subject of this chapter, which begins by studying properties and methods of the Document object itself. These are interesting, but they are only the beginning.

More interesting than the Document object itself are the objects that represent the content of the document. HTML documents can contain text, images, hyperlinks, form elements, and so on. JavaScript code can access and manipulate the objects that represent each document element. Being able to directly access the objects that represent the content of a document is very powerful, but this is also where things start to get complicated.

A Document Object Model, or DOM, is an API that defines how to access the objects that compose a document. The W3C defines a standard DOM that is reasonably well supported in all modern web browsers. Unfortunately, this has not always been the case. The history of client-side JavaScript programming is really the history of the evolution (sometimes in incompatible ways) of the DOM. In the early days of the Web, Netscape was the leading browser vendor, and it defined the APIs for client-side scripting. Netscape 2 and 3 supported a simple DOM that provided access only to special document elements such as links, images, and form elements. This legacy DOM was adopted by all browser vendors and has been formally incorporated into the W3C standard as the "Level 0" DOM. This legacy DOM still works in all browsers, and I'll cover it first.

With Internet Explorer 4, Microsoft took control of the Web. IE 4 had a revolutionary new DOM: it allowed access to all elements in a document and allowed you to script many of them in interesting ways. It even allowed you to alter the text of a document, reflowing paragraphs of the document as needed. Microsoft's API is known as the IE 4 DOM. It was never standardized, and IE 5 and later adopted the W3C DOM while retaining support for the IE 4 DOM. Portions of the IE 4 DOM were adopted by other browsers, and it is still in use on the Web. I'll discuss it at the end of this chapter, after covering the standard alternative to it.

Netscape 4 took a very different approach to the DOM, based on dynamically positioned scriptable elements known as layers. This Netscape 4 DOM was an evolutionary dead end, supported only in Netscape 4 and dropped from the Mozilla and Firefox browsers that sprang from the Netscape codebase. Coverage of the Netscape 4 DOM has been removed from this edition of the book.

The bulk of this chapter covers the W3C DOM standard. Note, however, that I present only the core parts of the standard here. Scripting document content is the reason for client-side JavaScript, and most of the remaining chapters of this book are really continuations of this chapter. Chapter 16 covers the W3C DOM standard for working with CSS styles and stylesheets. Chapter 17 covers the the W3C DOM standard for handling events (as well as legacy and IE-specific techniques for doing those things). Chapter 18 explains the DOM for interacting with HTML form elements, and Chapter 22 explains how to script the <img> tags of an HTML document and how to add scripted drawings to client-side web pages.

The Level 0 DOM defines only a single Document class, and this chapter often refers informally to the Document object. The W3C DOM, however, defines a Document API that provides general document functionality applicable to HTML and XML documents, and a specialized HTMLDocument API that adds HTML-specific properties and methods. The reference material in Part IV of this book follows the W3C convention: if you are looking up HTML-specific document features, look under HTMLDocument. Most of the features of the Level 0 DOM are HTML-specific, and you must look them up under HTMLDocument, even though this chapter refers to them as properties and methods of Document.