Referencing
How browsers affect it
Referencing is, in my experience, the hardest thing to learn to get right. It is not helped by the fact that the methods required may be different in different browsers and so you have to include several different versions of the code to ensure it will work in all of them. I have put together a list of the most popular browsers available that support JavaScript.
Opera, Mozilla and Safari/Chrome-based browsers currently have the highest level of JavaScript support, but many scripts are poorly written, and are based on the implementation of just a few browsers, typically just Internet Explorer and one other browser. Unfortunately, Internet Explorer 8- does not have a very good JavaScript implementation. It often does not comply with the standards, relying instead on authors to use its non-standard extensions. Many authors do not realise these are non-standard, and end up writing code that relies on these extensions. Other browsers may implement some of these extensions in an attempt to get these scripts to work. To make matters worse, when running in quirks mode, Internet Explorer 9+ removes support for the standards approach, and reverts to the scripting support of earlier versions. Scripts that need to run in both standards and quirks mode will still need to allow for both approaches, even if older versions of Internet Explorer are not being used.
What I have done in this tutorial is to carefully test the responses of as many different browser engines as I could, and put together something that works in as many of them as possible. Where possible, I will rely on the standards compliant version, and only fall back to the alternatives if a standards compliant technique cannot be used.
Although the W3C DOM makes it possible to access any object using a standard DOM structure, the older approaches are still possible, and widely used on the Web. These older approaches will be covered first in this tutorial, as it is necessary to know them when dealing with code that is designed to work in all possible browsers, including the older ones.
Object hierarchy
To reference items (objects) on the page, refer to an object structure or hierarchy. The topmost object is usually 'document' and the next will be different depending on the document structure. Most elements (HTML tags) cannot be referenced in all 4th generation browsers. Those that can are:
- body, referred to as document
- div, referred to using browser specific references, targetting its id
- span, referred to using browser specific references, targetting its id (it is best not to reference this for 4th generation DHTML as layers browsers have bugs that will show up if you do)
- img, referred to through the document object targetting its name
- a, referred to through the document object targetting its index
- form, referred to through the document object targetting its name
- input, select or textarea, referred to through the form targetting its name
In most browsers, these components will be available to scripts immediately after they have been written. If being
written by script, they should be available immediately, but in some older browsers they may not be available until
that script has completed executing (after the </script> tag).
In some more poorly written old browsers, these document components will only be available after the document has loaded.
You can detect when the document has loaded using the window.onload event (which can also be written in HTML as
<body onload= ...). Strangely, older Gecko browsers (Mozilla/Firefox 1/Netscape 6+) will need at least one non-entity character to be written
between the element's opening tag and the script, even if the element is an image, or the element will not be available
to script until after the page loads.
There are a few others elements that can be referenced. For a list of objects, properties, collections and methods, refer to the section on The JavaScript object. In 5th generation browsers (the vast majority of browsers in use today), all elements can be rederenced using the DOM. This will be covered in later sections.
I have written a generic referencing function that can be used to reference all document components that can be referenced (except links), but I suggest you work through the next few sections of the tutorial first instead of taking a shortcut. You might actually understand what I am doing, instead of blindly using my code without knowing how it works.
Avoiding referencing conflicts
Remember that all names in JavaScript are case sensitive. Names must begin with a-z or A-Z or _ and may only contain the characters a-z, A-Z, 0-9 and _. The convention is to use names that describe the object. If the name is made up of more than one word, there should never be a space between the words and it is not usual to have an underscore ( _ ) between the words. The usual practice is to capitalise the first letter of all words except the first.
For example, I have a variable that I will be using to store some text about me. I decide the best name is 'text about me' and I must remove the spaces and capitalise the first letters of all words except the first. Therefore, the variable name becomes 'textAboutMe'.
In order to avoid referencing conflicts, you must make sure that no two JavaScript objects or document elements are given the same name (except inputs - see the next section).
When choosing names for variables, functions and both names and IDs of HTML elements, there is a set of reserved words which you must not use, regardless of the case. These are: abstract, arguments, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, export, extends, false, final, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with.
In addition, it is generally a good idea not to use names that conflict with the names of existing properties or methods of the global/window object (unless you really want to overwrite them). See the section on The JavaScript object for more details.
Last modified: 19 March 2011