Recently I’ve been discovering the joys of DOM scripting. Remember the first time you pulled text from database to a Web page, and that sudden realization that you’d never write a static page again? It was kinda like that.
Many of us have used getElementById to dip our toes in the murky waters of DOM scripting; easily changing the styles of an id with something as simple as:
document.getElementById('thing').style.background = 'yellow'But DOM scripting is much more than getElementById. Elements can be isolated and manipulated without having an id at all. To demonstrate this, and to get you thinking, I’ve put together a simple function which redefines the styles of a class. It’s in my shiny new sandbox, an area I created for such experiments.
I firmly believe we will see a resurgence of JavaScript over the next year. Browser support for DOM methods and properties is good and consistent. IE/Win of course has a few differences to the rest, particularly when it comes to event capturing, but these are reasonably elegantly overcome.
It feels like we have a blank canvas on which to re-learn JavaScript and how to apply it well and accessibly. In a previous post I mentioned Peter-Paul Koch’s article on Digital Web which explained how to apply scripting as an independent layer over structure (XHTML) and presentation (CSS). If folks learn their new JavaScript skills from articles such as this, and Simon Willison’s SitePoint tutorials then maybe, just maybe, we’ll get it right first time.
James Craig wrote:
Nice work. I’d like to add a few tips that have helped me with DOM-scripting.
First, make your scripts more modular. Break up the tagName and className frunctionality into separate functions. Marcus Campbell developed a similar function (Part of that link anchor was cut off. It should be #post000956) that returns a collection of all elements containing a class. If you need to, you can pass that result to another function that will only return a subset results with the correct tagName. Then work your changes on that result.
Second, I’ve found it’s more valuable to add classes to an element than directly modify it’s style property. className can be a theoretically infinite list of space-separated class names. Add or remove classes to manipulate style. This has the benefit of leaving your style properties in your stylesheet and also allows for CSS functionality like the cascade and pseudo-classes. For example, as far as I know, you can’t manipulate the :hover pseudo-class through JavaScript without modifying the className property of the element. This was something I tried to do when working on an accessible menu experiment (JavaScript file is in the parent directory listing). I never got it quite right though, and have abandoned that project for other things.
Anton Andreasson wrote:
I just updated my blog using some “sandbox style DOM scripting”, I’d like to hear your comments (never done this stuff before..)
cheers,
/Anton
Rich wrote:
Thanks for these tips James – good stuff! In particular adding and removing classes in order to style elements seems a much more elegant way of doing things, better reflecting the way we normally use styles.
Graham wrote:
Minor error in the sandbox explanation?
var elemClass = elemColl[i].className;
...
For each li, we use the getAttribute property to find the class name; this we assign to the elemClass variable.
Think you meant className property.
Rich wrote:
Corrected. Thanks.