HTML and CSS Reference
In-Depth Information
The Document Object Model
JavaScript is an
object-based language
—that is, it's based on manipulating objects by
changing each object's properties or by applying a method or an action to each object,
often in response to an event. JavaScript supports four kinds of objects:
built-in objects
that are intrinsic to the JavaScript language, such as the
Math
,
Array
, and
Date
objects;
document objects
that reference elements and attributes found within the Web docu-
ment;
browser objects
associated with each user's Web browser itself; and
customized
objects
created by the programmer for use in his or her application. In this tutorial, you'll
explore mainly document objects.
To reference them in your code, document objects must be organized in a structure
called the
document object model
(
DOm
). In the early days of the Web, each browser
supported its own document object model, which led to a great deal of confusion and
frustration for Web programmers. The first official document model,
DOm level 1
,
was released by the W3C in October 1998 to create a common standard supported by
all browsers. The second specification,
DOm level 2
, was released two years later in
November 2000, enhancing DOM Level 1 by providing an
event model
for the capture
and programming of events occurring within the document and Web browser. DOM
Level 2 also included support for style sheets and provided a
range model
to allow
programmers to manipulate sections of text within a document. The next specification
was
DOm level 3
, released in April 2004; it provided a framework for working with
document loading and saving, as well as for working with XML, namespaces, DTDs, and
document validation. At the time of this writing, all current browsers support most of
DOM Level 3.
With HTML5 came a new document object model based on the changes and
enhancements introduced with that markup language. Any Web browser that supports
HTML5 also should support large parts of the HTML5 DOM. At the time of this writing,
no browser provides complete coverage of all of the proposed features of the HTML5
DOM, and the W3C is constantly revising and updating the HTML5 DOM specifications.
Complicating matters, Internet Explorer developed its own document object model,
the
ie DOm
, during the early days of the Web. The IE DOM is not supported by other
browsers and it differs in some significant ways from the different levels of the W3C
DOM. However, recent versions of Internet Explorer, starting with IE9, have moved
toward supporting more of the DOM Level 3 and the HTML5 DOM.
All of this means that when you write code involving document objects, you must
take into account which document object model is supported by each browser and each
browser version. For example, if you need to support older browsers, you must limit the
HTML5 DOM features that you include in your code or provide workarounds for those
older browsers. Figure 13-4 summarizes the different document object models that have
been introduced and supported by the browser market throughout the years.
