Beginning Ajax With ASP.NET (2006).pdf

JavaScript and the Document Object Model
This gives the SuperAgent object all the characteristics of the Agent object. From this, you can further
supplement this behavior by continuing to define properties and methods using the standard prototype
syntax. To override any of the behavior of the Agent object, simply define properties and/or methods of
the same name as the inherited objects.
Summary of Material So Far
Up to this point, this chapter has covered some of the basics, core concepts, and advanced object concepts
of JavaScript. You have learned the basic syntax of JavaScript, how to define arrays, functions,
event handlers, basic flow control, operators, and basic input/output operations, and performed a
whirlwind tour of object-oriented concepts like constructors and the more advanced concepts like object
inheritance via prototype chaining.
One of JavaScript’s main goals is to allow dynamic manipulation of HTML documents, that is, to act as
the scripting engine for DHTML (Dynamic HTML) web applications. Now that you have the core concepts
of JavaScript and its operation covered, you can delve into the world of the Document Object
Model and how to manipulate it.
The Document Object Model
The Document Object Model, or DOM, is an object that provides access to all the elements within the
HTML document or page, such as links, forms fields, anchors, and so on. There are, however, several object
models that relate to the DOM as it stands today that warrant some discussion. Earlier in this chapter, we
briefly discussed the evolution of the DOM by various browser vendors and touched upon the various
incompatibilities that have occurred as the object models have evolved over time. This is both a good and
a bad thing. On one hand, it means that the object models are constantly being reviewed and improved
upon, with the ultimate goal to reach a level of standardization, or commonality, among all the major
browser vendors. This is one of the major tenets of the W3C, which was also mentioned at the beginning
of this chapter. On the other hand, it means that, over time, vendors have implemented browser features
in different ways, which makes it hard for developers to implement functionality without ensuring that it
works in browsers from various vendors, as well as different versions of browsers from the same vendor.
There are essentially three object models that form the primary pieces of the JavaScript object model set:
❑
❑
❑
The core JavaScript object library and language
The Browser Object Model
The Document Object Model
So far in the chapter, we have covered the first piece of the JavaScript object model set, and this is fairly
consistent across browser vendors and the various browser versions.
The second piece represents the object model exhibited by the browser itself. This traditionally comprises
a window object as the root object, which holds references to other objects contained within it such as the
document object that contains the page elements. The document object is the reference to the standard
DOM — the third of the primary pieces of the JavaScript object model set — and is the reference by which
you can manipulate page elements dynamically using JavaScript. Figure 3-3 shows this relationship.
51