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" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" 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 the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
