Chapter 5. Manipulating the DOM

Having an efficient method to send a request to the server and pull back its response without having to refresh the whole page is very important. It is only a small part of Ajax development, though. What is more important to any Ajax web application is what is done with the data the client receives. There’s a lot more work to do than just grabbing the data, formatting it, and setting it equal to the innerHTML of an element. Understanding how the HTML Document Object Model (DOM) works and how to manipulate it is of utmost importance. I like to think that this—manipulating the DOM—is where the magic of Ajax actually happens. This is what gives Ajax life and allows application development on the Web.

The first key to understanding how the DOM works is to examine the structure of a DOM object. Then it will become clearer how the methods allow you to manipulate the DOM.

Understanding the DOM

The structure of any DOM object is its document tree. The document tree is made up of branches and leaves. Let’s look at a simple XHTML document, shown in Example 5-1, to clarify.

Example 5-1. A simple XHTML document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""> <html xmlns="" xml:lang="en"> <head> <title>A Document tree example</title> </head> <body> <div id="body_content"> <h1>A Document tree example</h1> <p> This is just a <em>very</em> simple example. </p> </div> <div id="body_footer"> This ...

Get Ajax: The Definitive Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.