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

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:

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:

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.

Copyright (c) 1997-2015 JavaScript Kit. NO PART may be reproduced without author's permission.