home | O'Reilly's CD bookshelfs | FreeBSD | Linux | Cisco | Cisco Exam    

Dynamic HTML: The Definitive Reference, 2rd Ed.Dynamic HTML: The Definitive ReferenceSearch this book

Chapter 9. Document Object Model Reference

This chapter focuses on objects—the scriptable entities that a browser maintains in its memory whenever a document is loaded. Most of these objects exist by virtue of tags embedded within the content of the document. But many more objects exist solely for the purposes of scripting activities, such as event processing, window manipulation, creating and populating documents with new objects, reading the client's system environment, and working with chunks of the document text separated from its tagged markup.

An object is described by its properties, methods, collections (or arrays) of nested items, and event handlers. The Dynamic HTML features that you associate with a document rely entirely upon the objects and the properties, methods, and events that are supported by the browsers used by the page's visitors. The scriptable object model of early browsers was a simple one, with relatively few objects, and those objects had short lists of implemented properties, methods, and events. Today's model, however, is huge, due primarily to a greatly expanded object model for Microsoft Internet Explorer (especially the Windows version) and, more recently, the addition of a completely new abstract object model designed by the W3C.

To help you choose the right objects, properties, methods, and event handlers for the type of page development you're doing, this chapter lists every client-side Dynamic HTML-related object defined by Microsoft, Netscape, and the W3C (at least the DOM Level 2 standard for all modules). From these listings, you should be able to judge whether a particular object or its properties, methods, or event handlers will work for your application.

If cross-browser support is essential for your application, pay close attention to the browser support and version information for each entry. The version number represents the first version of a particular browser to support the term. Where no implementation exists, I use "n/a" to indicate that. In rare instances, an item has been removed from a browser family. Such items are marked with a less-than symbol and the version number that no longer supports the item (e.g., NN <6 for prior to Netscape 6). Items valid for a single version show the number encased in pipe symbols (e.g., |4|: for Version 4 only). Be aware that some items may not be available on all operating system platforms for a particular browser brand and version (particularly true for Internet Explorer). These distinctions are noted wherever the anomalous behavior could be substantiated by actual testing on the Win32 and Macintosh platforms.

A handful of items that appear as new for Version 6 browsers may not, in truth, be fully implemented in the browsers. This occurs when a browser maker claims support for an element or attribute because the item is implemented in HTML 4 or the DOM, and the browser wishes to claim compliance with that standard version. The descriptions of such items clearly state when the item belongs to the object, but does not perform its intended job. Text references to Netscape 6 automatically impy support by all Mozilla-based browsers, including Netscape 7. Some items, however, are new for Netscape 7 and are marked accordingly.

Following a section that lists properties, methods, and events shared by all HTML element objects in the latest browsers, this chapter is organized alphabetically by object type. The accompanying properties, methods, and events are displayed in a grey font. Most object types appear as their corresponding HTML element's tag name (in XHTML lowercase form). Scripts do not reference elements by these names, except when they use tag name strings as method parameters (e.g., document.getElementsByTagName("h1")). Instead, scripts reference such element objects by the various ways that scripts produce valid references to element objects. The most common is to assign an identifier to the ID attribute of the element, and use that identifier to create a reference with syntax such as the following W3C DOM method:


where the parameter is a string of the element's identifier. Numerous other properties throughout the object models evaluate to valid element object references, without requiring an explicit reference to the identifer. For example, an event object contains a property that evaluates to a valid reference to the element that was the target of the event. A script statement can then use that reference to access the element object's properties or methods, as needed.

The very large W3C DOM vocabulary contains many terms that do not come into common use even in today's browsers. For example, the element object listed in this chapter as the div object is formally known in the W3C DOM as the HTMLDivElement object. In fact, if you use an alert( ) method with a reference to an HTML element object in a browser that supports this terminology (such as Netscape 6), the dialog window displays the W3C DOM name for the object type, which is handy for debugging purposes. In Netscape 6, the W3C DOM object name represents the constructor for that object type. Thus, you can use JavaScript prototype inheritance to assign a custom property to the type of object before your scripts create instances of that object type:

HTMLDivElement.prototype.author = "DHTML";

Thereafter, all elements of that type that your scripts create have this new property and value preassigned to it. For the sake of compactness, this chapter does not list the W3C DOM HTML element objects as separate entries.

9.1. Property Value Types

Many properties share similar data requirements. For the sake of brevity in the reference listings, this section describes a few common property value types in more detail than is possible within the listings. Whenever you see one of these property value types associated with a property, consult this section for a description of the type.

9.1.1. Length

A length value defines a linear measure of document real estate. The unit of measurement can be any applicable unit that helps identify a position or space on the screen. For properties that reflect HTML attributes, length units are uniformly pixels, but in other content, such as that specified in Cascading Style Sheets (see Chapter 11), measurements can be in inches, picas, ems, or other relevant units. A single numeric value may represent a length when it defines the offset from an edge of an element. For example, a coordinate point (10,20) consists of two length values, denoting pixel measurements from the left and top edges of an element, respectively.

9.1.5. Colors

A color value can be assigned either via a hexadecimal triplet or with a plain-language equivalent. A hexadecimal triplet consists of three pairs of hexadecimal (base 16) numbers that range between the values 00 and FF, corresponding to the red, green, and blue components of the color. The three pairs of numbers are bunched together and preceded by a pound sign (#). Therefore, the reddest of reds has all red (FF) and none (00) of the other two colors: #FF0000; pure blue is #0000FF. The letters a through F can also be lowercase.

This numbering scheme obviously leads to a potentially huge number of combinations (over 16 million), but not all video monitors are set to distinguish among millions of colors. Therefore, you may wish to limit yourself to a more modest palette of colors known as the web palette. A fine reference of colors that work well on all browsers at popular bit-depth settings can be found at http://www.lynda.com/hexh.html.

The HTML recommendation also specifies a basic library of 16 colors that can be assigned by plain-language names. Note that the color names are case-insensitive. The names and their equivalent hexadecimal triplets are as follows:

Black #000000 Maroon #800000 Green #008000 Navy #000080
Silver #C0C0C0 Red #FF0000 Lime #00FF00 Blue #0000FF
Gray #808080 Purple #800080 Olive #808000 Teal #008080
White #FFFFFF Fuchsia #FF00FF Yellow #FFFF00 Aqua #00FFFF

In other words, the attribute settings bgcolor="Aqua" and bgcolor="#00FFFF" yield the same results.

Netscape has developed a much longer list of plain-language color equivalents. These are detailed in Appendix A, and are recognized by recent versions of both Navigator and Internet Explorer.

Library Navigation Links

Copyright © 2003 O'Reilly & Associates. All rights reserved.