Traversing the Document Object Model

Abstracting Your Javascript

It should'nt come as too much of a surprise when I say that littering your HTML with behavioural scripts isn't the best way to go about coding your pages. The task that HTML was designed to perform, structuring content, should be the only task that you make it perform. Of course there are ways to add JavaScript straight into your HTML elements such as onclick, onmouseover, onselect -- but these methods are all available by traversing through the HTML objects using the Document Object Model.

Nothing you know about JavaScript has to change. You can still validate forms, make things move around and create a general featst for the eyes using Javascript. You just want to try and move every bit of JavaScript for any given page out to a separate .js file.

Give Portability to your JavaScript

Everything these days is going portable. You pick up your laptop and take it around with you, your game console memory cards allow you to take your saved games on a wander and even car stereos can clip off to come for walkies. Why should your JavaScript be any different?

It's probably happened to you, I know that it's happened to me, I've written a fantastic client-side script that I think would work great over at another site that I'm building. The problem? I've hard coded a lot of the script towards the page it was written for. This means that it's not a simple matter of picking the script up and dropping it in another document, it requires rewriting some of the code and going through the HTML of the new site to add in all the event handlers that the script requires.

If you are writing your scripts using the power of abstraction offered by the DOM, then you can simply insert the script into a new page with hardly any fuss. This is possible because you never write a single line of code inside of the HTML, everything is in separate files that can be used anywhere at all.

Make maintenance easy in your JavaScript

You are working on a companies website and they like to add their company name to all of the alert boxes that are used throughout the site. One day, for absolutely no reason whatsoever, they decide to change their name. This site has 50 pages and at least one hard-coded JavaScript alert on each page. What does this mean for you? Yep, you guessed it, you have to go through every page and change the company name in every JavaScript call. This may sound like a far-fetched example but it has happened to me and it wasn't much fun having to go through and change all of the code.

If you are coding using the DOM, you could simply store the company name in a variable and add this to all the alertboxes when they are called. The company name is hard-coded in only one place so if they decide to change it again? No problems, just change that one line. Changes and maintenance like this becomes much less of a hassle when you code from outside your page using the DOM.

Speed up and Optimise your JavaScript

Function calls are one of the slowest things in JavaScript. It isn't too noticeable on the faster PC's we use today but if you have a page littered with inline event handlers, you are running a function on every event. If you then call a function from the event handler, you are running two functions just to see the result of one! The DOM lets you access the elements externally so you can assign functions to event handlers. You can further speed up your code using the Object Oriented tools such as prototypes and classes.

When it comes to optimising your pages for search engines, it isn't too hard to recognise that relevancy of your page is important. I have seen cases where a single inline onclick event handler is used to perform over 10 actions including a switch statement and an on-the-fly function declaration. Not to mention the speed implications, this is all text and waffle that you would rather not have the search engines take any notice of. If you get rid of inline calls to event handlers, you are removing everything but content and structure from your page so everything a search engine sees is relevant leading to higher rankings.

Gracefully degrade your JavaScript

Last but certainly not least when it comes to benefits of using the DOM for all of your client-side scripting is the ability to have it degrade gracefully. What does that mean? Graceful degredation is where a page can still be used without issue even if the user arrives at your site with an old browser that doesn't support the latest JavaScript, or any JavaScript at all.

The idea of JavaScript is to enhance the user experience, it is not deemed good practice to make a site that relies on it. Instead of adding JavaScript to the internals of your page as your build it, build the page and then add controls from the outside to enhance the page. If a user doesn't have JavaScript switched on, no problem at all, they see the original full working page. If they do have it switched on, they get the extra niftiness of your enhancements.