JavaScript® and AJAX for Dummies®

Chapter 6. Talking to the Page

In This Chapter

• Introducing the Document Object Model

• Responding to form events

• Connecting a button to a function

• Retrieving data from text fields

• Changing text in text fields

• Sending data to the page

• Working with other text-related form elements

• Viewing the source of dynamically generated code

JavaScript is fun and all, but it lives in Web browsers for a reason: to let you change Web pages. The best thing about JavaScript is how it helps you control the page. You can use JavaScript to read useful information from the user and to change the page on the fly.

Understanding the Document Object Model

JavaScript programs usually live in the context of a Web page. The contents of the page are available to the JavaScript programs through a mechanism called the Document Object Model (DOM).

The DOM is a special set of complex variables that encapsulate the entire contents of the Web page. You can use JavaScript to read from the DOM and determine the status of an element. You can also modify a DOM variable and change the page from within JavaScript code.

Navigating the DOM

The easiest way to get a feel for the DOM is to load up a page in Firefox and look at the Firebug window's DOM tab. I do just that in Figure 6-1. In order to see what's happening with the DOM, I'm using the Firebug extension. Check back to Chapter 1 if you need a refresher on using Firebug. Note also that some versions of Firebug (especially on the Mac) are slightly different, but the general idea is the ...