About Node Manipulation

This chapter is about the deepest that this book goes into JavaScript and the DOM, so we'll first need to cover a little bit of history and terminology.

DOM-2 and the W3C

The W3C (as mentioned in Chapter 1) has released specifications for how browsers should handle the Document Object Model (also known as the DOM). The DOM Level 2 specification, which became an official recommendation in November 2000, goes into more depth as to how browsers should be able to refer to and manage the content on their pages. You can find out more details about the specification at http://www.w3.org/TR/DOM-Level-2-Core/.

Although this specification has been around for years, there are still plenty of browsers in use that have incomplete or partial DOM-2 support. Before using any of these scripts, make sure that your intended audience is able to run them, or that you offer another way for older browsers to achieve the same results. Thankfully, the majority of surfers today use Internet Explorer 6+, Firefox, or Safari, which should all work just fine with these scripts.

DOM-2 terminology

At the beginning of this book, we referred to JavaScript as "the snap-together language," because of the way that you can put objects, properties, and methods together to build JavaScript applications. There's a different way to look at HTML pages that we've only briefly mentioned before: as a tree structure with nodes. For example, this simple Web page

<html>
<head>
    <title>My page</title>
</head>
<body>
    <p>This is text on my page</p>
</body>
</html>

can be displayed as seen in Figure 12.1.

Figure 12.1. The tree structure, showing nodes, is just another way of looking at how an HTML page is organized.

We can use JavaScript to modify any aspect of this tree, including the ability to add, access, change, and delete nodes on the tree. Each box on the tree is a node. If the node contains an HTML tag, it's referred to as an element node. Otherwise, it's referred to as a text node. Of course, element nodes can contain text nodes.

DOM-3

Level three of the DOM standard became an official recommendation in April 2004. That specification is at http://www.w3.org/TR/DOM-Level-3-Core/. As with so many other parts of the W3C process, we're still a long ways off from true support in shipping browsers, so this chapter sticks to discussing DOM-2. However, if you're interested in learning more, the best place to look is at the ECMAScript bindings, which can be found at http://www.w3.org/TR/DOM-Level-3-Core/ecma-script-binding.html.