Ajax combat: Using JavaScript to manipulate DOM

In any application, we need to change the user interface during the user's use, and provide feedback to the user for the operation and completion of the process. The feedback includes modifying a single element's label or color, ejecting a temporary dialog box, replacing most of the screen content with a new set of UI components, and so on. The most common way to date is to construct a DOM tree (in other words, to write an HTML page) by providing a declarative HTML to the browser.

The documentation we showed in listing 2-2 and figure 2-3 is a bit too big and complex, or a small step to start DOM operations. Let's say we want to show friendly greetings to the user. When the page first loads, we do not know his name, so we want to modify the structure of the page later to add the name of the user, through the programmatic operation of the DOM node can do this thing. Listing 2-3 shows the initial HTML markup for this simple page.

Code listings 2-3 Ajax "Hello" page

We added two references to external resources: CSS and files that contain JavaScript code. We have also declared an empty element with an ID, and can later add more elements to it programmatically.

Let's take a look at the resources that are linked. By modifying the fonts and colors, the style sheet defines some simple styles for distinguishing between categories of entries in the list (code listing 2-4).