JavaScript Cookbook

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.

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