Learning JavaScript

Object Detection, Encapsulation, and Cross-Browser Objects

With the release of CSS and Netscape’s Navigator 4.x, as well as Microsoft’s Internet Explorer 4.x, web-page developers could finally create sophisticated page effects such as animated page contents, collapsing menus, and in-page notifications. The only problem was that not all of the browsers used the same object model when providing this capability.

One way around this cross-browser incompatibility was to access the agent string to determine what browser was accessing the page, and change the JavaScript accordingly. However, this approach, commonly called browser sniffing, was abandoned fairly quickly in favor of another approach: object detection.

Object Detection

With object detection, the JavaScript accesses the object being detected in a conditional statement. If the object doesn’t exist, the condition evaluates to false. In Chapter 9, I mentioned one object that’s commonly used in older scripts: document.all. Checking for document.all can detect a browser that supports the IE 4.x model. Another common object detection is to check for document.layers, which was supported by Netscape’s Navigator 4.x:

if (document.layers) ...

Luckily, all modern browsers support a fairly consistent model. All support the document.getElementById, which is critical for accessing specific elements. All support the style property (covered in the next chapter), which allows you to change the CSS style properties of an element.

Still, even now, ...