O'Reilly logo

JavaScript Cookbook by Shelley Powers

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 11. Accessing Page Elements

11.0. Introduction

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 the head and body elements. The head element contains title, script, and meta elements, while the body contains a couple of 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 span.

Example of a document tree

Figure 11-1. Example of a document tree

Except for the root element (HTML), each element has a parent node, and all of the elements are accessible from one object: document.

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 document object.

The DOM Level 0 Document

In the earlier browser object model, page elements were accessed via the 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[1]; // get second image in page

The earliest collections that can be accessed via the Document object are:

images

All images in the page

forms

Any forms in the page

links

All links in the page (declared with <a href="...">)

cookie

Access, add, and modify web page cookies

Some of the collection elements themselves had collections, such as being able to access all elements within a form via the form’s elements property:

var elemOne = document.forms[0].elements[0]; // 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"];

Forms also had name attributes as well as ids, either of which could be used to access the form. The form could also be accessed, via a shortcut, by its identifier/name:

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.

Note

Also note that the name attribute is only supported in a limited set of web page elements. You’re encouraged to use the id attribute instead.

In addition, all elements in the web page could be accessed via the document.all property, by specifying the identifier given the element:

<div id="test">
...
var tstElem = document.all["test"]; // returns ref to test div element

The 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 the all property’s use is discouraged in favor of the techniques formalized under the DOM Level 1 specification.

The Standardized DOMs

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 set of if statements, testing for browser support.

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.

Note

Be aware that at the time this book was written, implementation of DOM Level 3 Events functionality was sketchy, at best.

The most used method supported in the DOM Level 2 and up is the document object method getElementById:

<div id="test">
...
var testElement = document.getElementById("test");

The document.getElementById method originated in the DOM Level 1 HTML API, and then moved over as a more generalized method to DOM Level 2.

With document.getElementById, 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 its given id.

The getElementById method was just the beginning, and this very helpful method has been joined by getElementsByTagName, to get all elements via a specific element tag; getElementsByClassName, to get all elements that share the same class name; and the very new querySelector and querySelectorAll methods, which allow us to use the CSS style selectors in order to make more sophisticated queries.

See Also

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.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required