Chapter 13: Dynamic HTML in Modern Browsers

Overview

In the last chapter, we saw how to write DHTML for earlier browsers, such as IE 4 and Netscape 4. We also saw how different the code for the browsers had to be used to achieve the same results, making the web developer's life a difficult one. In this chapter we'll be concentrating on writing code that works with IE 5.5 and later and Netscape 6 and later. However we'll be sticking with web standards set by the W3C and we'll see this makes life a lot easier. In general, we can write code that will work with both IE 5.5/6 and Netscape 6/7 without having to make big changes.

One of the most misunderstood sections in the W3C Web standards is the Document Object Model, or DOM for short. The DOM gives us a way of representing everything on a web page so that it is accessible via a common set of properties and methods in JavaScript, or indeed any other object-based programming language. By everything, we mean everything. The graphics, the tables, the forms, and even the text itself should be changeable by altering a relevant property in script.

The DOM should not be confused with the Browser Object Model (BOM) that we introduced in Chapter 5 and used extensively in the last chapter. We'll look at the differences between the two in detail shortly. For now though, think of the BOM as a browser-dependent representation of every feature of the browser, from the browser buttons, URL address line, title bar, to the browser window controls, as well as parts of the web page too. The DOM, however, deals only with the contents of the browser window or web page, in other words, the HTML document. It makes the document available in such a way that any browser can use exactly the same code to access and manipulate the content of the document. To summarize, the BOM gives access to the browser and some of the document, whereas the DOM gives access to all of the document, but only the document.

The great thing about the DOM is that it is browser and platform independent. This means that we can finally consider the possibility of writing a piece of JavaScript code that dynamically updates the page, as we saw in the last chapter, and that will work on any DOM-compliant browser without any tweaking. We should not need to code for different browsers or take excessive care when coding.

The DOM does this by representing the contents of the page as a generic tree structure. Whereas in the BOM, we might expect to access something by looking up a property relevant to that part of the browser and adjusting this, the DOM requires us to navigate through its representation of the page via nodes and properties nonspecific to the browser. We'll explore this structure a little later.

However, to use the DOM standard, ultimately we require browsers that completely implement the standard, something that no browser does 100% efficiently. Unfortunately, IE 5.5 didn't support many aspects of the standard. IE 6 has improved on that situation but still falls short of full implementation. Even NN 6 and 7, which at least aim to support the standard, still fall short in some ways. So while cross-browser coding is much simpler for NN 4 and IE 4, it is still not as simple as it could be.

This makes the DOM sound like an impossible ideal, yet the DOM doesn't exist purely as a standard. Features of the DOM standard have been implemented in browsers as far back as NN 2. However, in NN versions 2, 3, and 4, many HTML page elements and their properties were not scriptable at all, while, as we have seen, IE 4 made nearly all page elements and their properties scriptable. Unfortunately, the way in which NN 4 provides scripting access to some elements is often incompatible with the way in which IE 4 makes those elements available. Thus a Document Object Model standard was developed. The latest versions of IE and NN browsers support many features outlined in the standard.

To provide a true perspective on how the DOM fits in, we need to briefly outline its relationship with some of the other currently existing web standards. We also need to explain why there is more than one version of the DOM standard, and within the standard itself, why there are different sections. (Microsoft, in particular, added a number of extensions to the W3C DOM.) After understanding the relationships, we can look at using JavaScript to navigate the DOM and to dynamically change content on our web pages in a way that previously with just pure DHTML was impossible in more than one browser. The following items are on our agenda:

• The HTML, ECMAScript, XML, and XHTML Web Standards

• The DOM standards

• The DOM tree structure

• Writing Cross-Browser DHTML

  Note

  Remember that the examples within this chapter are targeted only at the DOM and therefore will only be supported by IE 5.5 and later, and NN 6 and 7.