Overview of scripting in modern browsers such as IE6+ and Firefox

This tutorial aims to provide a quick overview of scripting (JavaScript) in modern browsers such as IE6+ and Firefox 1+, where it differs and is similar to scripting in legacy browsers proceeding them.

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")

For most JavaScripts you'll write, just detecting support for document.getElementById will suffice in ensuring the script will run in that browser.

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:

<form id="myform">
<input type="text" name="telephone" />
</form>

<script type="text/javascript">
//proper way to access a form
document.getElementById("myform").telephone

//Legacy, improper way to access a form (assuming "formname" is the name of the form)
document.forms.formname.telephone
</script>

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:

<img id="myimage" src="dog.gif" />

<script type="text/javascript">
var imgsrc=document.getElementById("myimage").getAttribute("src")
document.getElementById("myimage").setAttribute("src", "cat.gif")
</script>

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:

<body onload="dothis()">

<script type="text/javascript">
if (window.addEventListener) //DOM method for binding an event
window.addEventListener("load", dothis, false)
else if (window.attachEvent) //IE exclusive method for binding an event
window.attachEvent("onload", dothis)
else if (document.getElementById) //support older modern browsers
window.onload=dothis
</script>

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

Conclusion

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.