Mastering Ajax, Part 5th: Manipulating the DOM

Use JavaScript to instantly update Web pages

Introduction: In the previous issue, Brett introduced the Document Object Model (DOM), whose elements define WEB pages behind the scenes. In this installment he will explore the DOM further. Learn how to create, delete, and modify parts of the DOM tree to learn how to implement immediate updates to your Web pages!

If you've read the previous installment of this series, you know exactly what's going on behind the scenes when a Web browser displays a Web page. As mentioned earlier, when HTML or a page-defined CSS is sent to a Web browser, the Web page is converted from text to an object model. This is true whether the code is simple or complex, centralized to a single file, or dispersed to multiple files. The browser then uses the object model directly instead of the text file you provided. The model used by the browser is called the Document Object Model (MODEL,DOM). It joins objects that represent elements, attributes, and text in a document. All the styles, values, and even most of the spaces in HTML and CSS are merged into the object model. The specific model for a given web page is called the DOM Tree of that page.

Understanding what a DOM tree is and knowing how it represents HTML and CSS is just the first step in controlling a Web page. Next you need to learn how to work with a Web page's DOM tree. For example, if you add an element to the DOM tree, the element will immediately appear in the user's Web browser--without reloading the page. Remove some text from the DOM tree, and those text will disappear from the user's screen. You can modify the user interface through the DOM or interact with the user interface, which provides strong programming power and flexibility. Once you've learned how to handle the DOM tree, you're making a big step toward a rich, interactive, dynamic Web site.

Note that the following discussion is based on the previous article "Using DOM for Web responses", and if you haven't read the previous installment, read the previous article before continuing.

Cross-browser, cross-language

The Document Object model is a standard for the consortium (links see Resources). Therefore, all modern Web browsers support dom--at least to some extent. Although different browsers have some differences, Dom code can be used in any browser in the same way if you use the DOM core functionality and notice a few special cases and exceptions. The code that modifies the Opera Web page can also be used for Apple's safari®, firefox®, Microsoft®internet explorer®, and mozilla®.

DOM is also a cross-language specification, in other words, most mainstream programming languages can use it. The consortium defines several language bindings for the DOM. A language binding is an API defined for a specific language that lets you use the DOM. For example, you can use the DOM language bindings defined for C, Java, and JavaScript. Therefore, you can use the DOM from these languages. There are also several language bindings for other languages, although many are defined by third parties outside the consortium.

This series of articles focuses on the DOM bindings of JavaScript. This is because most asynchronous application development needs to write JavaScript code that runs in a Web browser. Using JavaScript and DOM, you can instantly modify the user interface, respond to user events and input, and so on--using standard JavaScript entirely.

In summary, it is recommended that you also try DOM bindings in other languages. For example, using a Java language binding not only handles HTML but also processes XML, which will be discussed in future articles. Therefore, the technology described in this article can also be used in languages other than HTML, outside of client JavaScript.

The concept of a node

Nodes are the most basic object types in the DOM. In fact, as you'll see in this article, all other objects that are basically defined by the DOM are extensions of node objects. But before parsing the semantics, it is very easy to understand the concepts that the nodes represent and then learn the specific attributes and methods of the nodes.

In the DOM tree, basically everything is a node. Each element is a node in the DOM tree at the bottom. Each property is a node. Each paragraph of text is a node. Even annotations, special characters (such as copyright symbols ©), DOCTYPE declarations (if any in HTML or XHTML) are all nodes. So before discussing these specific types, you must clearly grasp what nodes are.

Node is ...

In the simplest words, the node is anything in the DMO tree. The vague word "things" is used because it is only clear to this extent. For example, elements in HTML (such as IMG) and text fragments in HTML (such as "Scroll down for the more details") have little obvious similarities. But that's because you're probably thinking about each type of functionality, and it's about their differences.

But if you look at it from another angle, each element in the DOM tree and each paragraph of text has a father, this parent node may be a child of another element, such as an IMG nested in the P element, or a top-level element in a DOM tree (this is a special case of one occurrence in each document, that is, the use of HTML element of the place). In addition, both the element and the text have a type. Obviously, the type of the element is the element, and the type of the text is the text. There is also a well-defined structure for each node: Are there nodes (such as child elements) below? Is there a sibling node (adjacent to the element or text)? Which document does each node belong to?

Obviously, most of the content sounds abstract. In fact, it seems a bit stupid to say that the type of an element is an element. But to really recognize the value of a node as a generic object type, you must think abstractly.