DOM Scripting Explained - A Layman's Guide
DOM Scripting is a combination of two web standards, the Document Object Model (DOM) and JavaScript. The DOM is a way of representing a document marked up with XHTML for example, as a document tree. This can then be manipulated by a scripting language such as JavaScript.
DOM Scripting And Accessibility
An important consideration when using DOM Scripting is to make sure the website functions without JavaScript, albeit in a less interactive way. This is known as graceful degradation. As of January 2006, as many as 10% of users browse with JavaScript turned off. Also, not all browsers (for example some hand-held devices) fully support DOM Scripting. Thus any site which relies on JavaScript to function, for example for navigation, is going to exclude these users. Not a smart idea!
So now we need to look at how DOM Scripting can benefit a web page.
Uses Of DOM Scripting
Below is a list (by no means exhaustive) of some uses of modern DOM Scripting:
- Form validation.
- Form validation is vital to ensure to user is entering the required data. Although validation should also be done on the server, client-side validation should also be implemented.
- Stylesheet switcher.
- A stylesheet switcher can give the user a choice of layouts or as an accessibilty enhancement by offering different font sizes or altering the page contrast.
- Image gallery.
- A image gallery created with JavaScript can produce a snappy user interface.
- Animation.
- Animation can create attractive effects when done in a restricted way, such as an image fade.
- Drop-down or fly-out menus.
- Modern drop-down or fly-out menus can be attractive, usable and accesible.
The key to using any of these techniques successfully is to ensure graceful degradation. Let's look at this sites stylesheet switcher to gain an better understanding of what this means.
Font Size Switcher
On the right hand side of the horizontal navigation bar (near the top of the page) are three buttons showing different sized letter 'A's. (Assuming you have JavaScript enabled). The highlighted button is the one currently selected. By clicking on one of the other buttons you can change the font size of all the text on the page. This allows users to easily increase the readability of the page.
What is happening here is that when the page is first loaded, the markup to create these buttons is added to the XHTML file by manipulating the DOM with JavaScript. Rules are then added to the CSS file to style these buttons. The reason why this markup is generated on the fly and not hard coded is that if JavaScript is disabled or some of the methods used are not supported, then the buttons would appear but not do anything. This is the opposite of the graceful degradation we trying to achieve and is poor coding practice.
At the same time as the buttons are being generated, they are given an event handler. An event handler is a unique feature of JavaScript in which it has an ability to react to user events such as moving or clicking the mouse, for example. In this case the buttons are given a 'click' event handler. Basically this means that when a button is clicked it calls a JavaScript function which selects a CSS file which changes the font size.
Want To Know More?
This really is a very brief introduction to DOM Scripting. However, our aim is to give you a little more understanding of how your website can be made more interactive. If you want to learn more about DOM Scripting check out the following resources, or read further in our resources section.
