Ajax DOM Scripting Techniques

The Ajax approach to developing Web applications relies heavily on JavaScript. JavaScript is used to:

• Make server requests with the XMLHttpRequest object
• Process the server response
• Manipulate and update the interface by scripting the DOM
• Respond to user events in the browser

In this article, I want to look at the third of these areas – DOM scripting. The DOM (Document Object Model) provides a way for Web developers to traverse an XHTML document. The DOM specification was developed by the World Wide Web Consortium (W3C) and it creates a tree-like structure from XML documents.

I’ll cover some of the useful scripting techniques that you’ll need for working with Ajax-style applications including:

• Finding elements by their tag name or id
• Locating specific elements, text and attributes
• Creating content
• Dynamically styling elements

I’ll also show you the DOM Inspector in Firefox.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the examples referred to in this article.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.