Overview of scripting in modern browsers such as IE6+ and Firefox
Detecting modern browsers
To the heart of the matter first- how to detect modern browsers in your script. The easiest way and one that is relatively reliable is to see if the browser supports document.getElementById, one of the primary methods of the DOM that any modern browser supports.
//1) Detect IE5+ and Firefox (including NS6+) if (document.getElementById) alert("You are using a modern browser that supports the DOM")
//2) Detect Firefox (and NS6+) exclusively if (document.getElementById && !document.all) alert("You are using Firefox or NS6+")
//3) Detect Opera 6+ exclusively if (window.opera && window.print) alert("You are using Opera 6 or above")
if (document.getElementById) //do something modern
Out with document.all
document.all is a proprietary property of IE introduced in IE4 that arguably ushered in the era of DHTML, allowing any element on the page to be accessed and manipulated. This property continues to be supported in IE6, and most likely for the next few versions ahead. However, just because it is supported doesn't mean you should use it. The DOM equivalent of document.all is document.getElementById, and you should use the later whenever possible for cross browser compatibility and ease of maintenance. FYI document.getElementById is supported in IE5 and above, and of course, all other modern browsers such as Firefox and Opera 6+.
Access the document by traversing the DOM
The old way of accessing and manipulating the document is being deprecated as developers are encouraged to use the DOM style instead. This means using the properties and methods of the DOM to access an element, change its attribute, or bind events to the page. The most demonstrative example is accessing a form- instead of using the property document.forms, you should now assign the form an ID and use that instead:
Here we have a form that can be accessed in two different ways, though the DOM way is the only one that will validate, as the <form> tag should no longer contain a "name" attribute, only "id".
To add or modify attributes of an element, you should now use the DOM methods for this, which are:
Last but no least, whenever possible, you should bind event handlers to the document by doing so inside your script and using the DOM. For example, instead of:
you should instead do this:
Some things are still proprietary
While everything revolves around the DOM in modern browsers, there are still properties and methods that are proprietary to specific browsers, whether it's Firefox or IE. Here are a couple of examples:
window.pageXOffset, window.pageYOffset //Firefox properties for document scroll coordinates document.body.scrollLeft, document.body.scrollTop //Firefox properties for document scroll coordinates window.innerWidth, window.innerHeight //Firefox properties for window dimensions document.body.clientWidth, document.body.clientHeight ////IE properties for window dimensions
The DOM is really nothing to be timid about. In fact, as you learn about the DOM, you'll see how it in facts simplifies your life, but providing you with a logical, browser neutral way of manipulating the document. The days of coding multiple versions of a script for multiple browsers are gone, if not very close to.