JavaScript allows you to restructure an HTML document, for instance by adding, removing, or reordering the items shown on the page. In fact, without the possibility of restructuring the document, or at the very least providing some feedback (such as text in a form field or an image swap), JavaScript is pretty much worthless.
The example script that best demonstrates this restructuring is Sandwich Picker. Users can quickly and easily specify the sandwiches they want to order, and the script gathers the data by moving the
s that contain sandwiches to the order table—in other words, by changing the document structure.
To change anything on a page, JavaScript needs access to all elements in the HTML document. Allowing this access and providing for methods and properties to query the current status of the HTML elements, or to add, move, or remove HTML elements, is the job of the Document Object Model, or DOM.
We discussed DOM history in 1C, but it's useful to repeat a few fundamentals. Since without a DOM JavaScript is worthless, the earliest JavaScript browsers already allowed limited access to a few HTML elements, most notably form fields and images. This old way of doing things is called the Level 0 DOM, and it was a part of the de facto Netscape 3 standard. Nowadays the Level 0 DOM is used only for form manipulation, for which it remains better equipped than its successor (see 8J).
In 1998, W3C published its Level 1 DOM specification, which allowed access to and manipulation of every single element in an HTML page, from the document itself to the lowliest text node. Better still, all browser vendors actually implemented this recommendation, and as a result, incompatibility problems in the DOM have almost (but not entirely) disappeared.
The W3C Level 1 DOM was created to allow any programming language to read and change XML documents. Since properly written XHTML is XML, and properly written HTML can be interpreted as such, the DOM can also be used by JavaScript to read and change HTML documents.
The greater part of this chapter discusses the Level 1 DOM, but we'll also take a look at the old Level 0 DOM, especially at its useful form-field properties.
We'll mainly use Sandwich Picker and Usable Forms as examples, since these scripts use the document-restructuring possibilities of the Level 1 DOM to the greatest effect.
XML Documents: Remember: the W3C DOM can also be used on XML documents. We'll discuss an example of this in 10B and 10C.
W3C DOM Compatibility Tables: As you'll notice in this chapter, the W3C DOM implementation of the browsers are occasionally incompatible. In order to guide Web developers through this maze of problems, I set up the W3C DOM Compatibility Tables at www.quirksmode.org.
A: Concepts
Before we delve deeply into the DOM, let's discuss a few general concepts.
Nodes
To the W3C DOM, everything in an HTML document is a node. The entire document is a document node; every HTML tag, such as <body>, <p>, or even <br />, is an element node; and the texts contained in these elements are text nodes. Furthermore, HTML attributes like ID are attribute nodes, and even comments are comment nodes.
The latest from WebReference.com
