Working with Forms and Input Devices - JavaScript by Example - page 327

chapter
11
Working with Forms
and Input Devices
11.1 The Document Object Model and the
Legacy DOM 0
If you recall from Chapter 1, “Introduction to JavaScript,” a document object model is a
way of conceptualizing a Web page where the document is represented as a tree structure.
In Chapter 10, “It's the BOM! Browser Objects,” we addressed the browser object model
(BOM). The properties and methods of different browsers vary because there is no stan-
dard for defining what a browser does. The DOM, on the other hand, deals specifically
with a document, and there are now standards that dictate how the objects in an HTML
(or XML) page should be represented. The industry standard DOM is discussed in full in
Chapter 15, “The W3C DOM and JavaScript.” Before the W3C created a standard way to
represent an XML/HTML document and all of its elements (DOM Levels 1, 2, and 3) there
was a DOM, now called the Legacy Dom 0, invented by Netscape at the same time they
created JavaScript. This DOM allowed developers to manipulate and query the content of
a Web page, particularly forms and images, and it is still supported by all browsers even if
they are DOM 1, 2, or 3 compliant. So if we have a better, newer, and more versatile DOM,
why use the old DOM at all? Because the Legacy DOM is still more practical and easier to
use when it comes to dealing with forms, images, links, and anchors. (In addition, DOM
0 is useful in searching for an element by its name with index values, removing and adding
option elements from a select list, and using the elements[] array to work with input
devices, such as buttons and textboxes.)
When an HTML document has been completely loaded, the browser represents it as
a tree structure where all elements in the page are objects. When working with forms,
JavaScript creates an array of all forms as it encounters them in the document, where
document.forms[0] represents the first form and if there is another form, it is docu-
ment.forms[1] . Similarly, all images, links, and anchors on the page are stored in a arrays
representing their names, such as document.images and document.links , and so on. With
JavaScript, you can go through these arrays in search of the exact image or form that you
want to influence using the array syntax we discussed in Chapter 9, “JavaScript Core
327