Discovering DOM scripting

§ Sandbox · DOM | JavaScript

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.