A web document is organized like an upside-down tree, with the
topmost element at the root and all other elements branching out, beneath.
As you can see when you look at a web page within the Safari Web Developer
Elements window (Figure 11-1), the
top-level element is the
html element, followed by
body elements. The
head element contains
meta elements, while the body contains a couple
div elements, one
containing paragraphs (
p), the other containing
an unordered list (
ul) and list items
li)—one of which contains a paragraph,
which contains a
Except for the root element (HTML), each element has a parent
node, and all of the elements are
accessible from one object:
There are several different techniques available for accessing these
document elements, or nodes as they’re called in the Document
Object Model (DOM). Today, we access these nodes through standardized
versions of the DOM, such as the DOM Levels 2 and 3, mentioned throughout
the book. Originally, though, a de facto technique was to access the
elements through the browser object model, sometimes referred to as DOM
Level 0. The DOM Level 0 was invented by the leading browser company of
the time, Netscape, and its use has been supported (more or less) in most
browsers since. The key object for accessing web page elements in the DOM
Level 0 is the
In the earlier browser object model, page elements were accessed
document object, via a set of
element collections. For instance, to access an
img element, we would access the
images array, which contains entries for all
images in the page, in order of their occurrence in the page:
var selectImage = document.images; // get second image in page
The earliest collections that can be accessed via the
Document object are:
var elemOne = document.forms.elements; // first element in first form
As with images, elements could be accessed by array entry, with position in the array determined by the position of the element in the web page. In addition, elements given an identifier could also be accessed directly via the collection:
<form id="new"> ... </form> var newForm = document.forms["new"];
var newForm = document.new; // form named "new"
Note, though, that this technique is not standardized via specification, though support for it is included in most (if not all) browsers.
Also note that the
attribute is only supported in a limited set of web page elements.
You’re encouraged to use the
<div id="test"> ... var tstElem = document.all["test"]; // returns ref to test div element
all collection was created
by Microsoft in Internet Explorer, and eventually became another de
facto standard. The
all property and
the other collections are still available for use now, and many of the
element collections are now in the DOM Level 2 HTML specification, but
all property’s use is discouraged
in favor of the techniques formalized under the DOM Level 1
The problem with the earliest techniques in accessing web page
elements is that the browser companies didn’t agree on any one
technique, and to support all of the browsers we had to use a convoluted
if statements, testing for
The W3C remedied this problem by releasing a new, standard approach to working with the web page document object model: the DOM Level 1. Since then, the organization has worked to refine the DOM with releases of DOM Level 2, DOM Level 3, and the current work associated with HTML5—demonstrated in this chapter and in the rest of this book.
The W3C specifications provide a core API that can be used for more generic documents, as well as APIs specific to HTML. These include a new events model, support for XPath, keyboard access, in addition to various methods to access existing elements, and to create new elements that can then be inserted into the document tree. The W3C documentation for the DOM consists of the standards specifications and language bindings. We’re primarily interested in the ECMAScript language binding.
Be aware that at the time this book was written, implementation of DOM Level 3 Events functionality was sketchy, at best.
<div id="test"> ... var testElement = document.getElementById("test");
method originated in the DOM Level 1 HTML API, and then moved over as a
more generalized method to DOM Level 2.
rather than have to access a specific element collection or determine if
document.all was supported, we can
use the standard method and be assured of accessing any page element by
getElementById method was
just the beginning, and this very helpful method has been joined by
to get all elements via a specific element tag;
to get all elements that share the same class name; and the very new
methods, which allow us to use the CSS style selectors in order to make
more sophisticated queries.
See Chapter 7 for coverage of event handling in DOM Level 2. The best way to find a summary of the different DOM specifications is via the W3C DOM Technical Reports page. Mozilla also provides a nice DOM summary, as does the Wikipedia entry on the DOM.
The ECMAScript binding for DOM Level 1 is at http://www.w3.org/TR/REC-DOM-Level-1/ecma-script-language-binding.html. DOM Level 2’s ECMAScript binding is at http://www.w3.org/TR/DOM-Level-2-Core/ecma-script-binding.html. The binding for DOM Level 3 is at http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html.