Keep Coding Tidy: Maintaining a tidy DOM for the future.
Posted by Dan Eastwell
In the beginning… we littered our code with <td>s <font>s, whatever. Now, through scripting, we’re doing exactly the same thing, and not caring about it.
We should make sure our script tidies up after itself, and doesn’t put non-semantic markup into the code. In the previous example, rel attributes might litter the HTML, as follows: rel="popup standard 800 600 noicon". Another example would be client side pyjama/zebra striping, by adding "odd" to every alternate line.
I'm as guilty as the next person of doing this, by creating a drop down FAQ, where a click on the h3s (questions) would cause a div to be revealed (answers). I had to eventually admit defeat and get the javascript to add <a>s to the DOM, in order to create a handle for keyboard users to click on.
There are two issues here:
- Firstly, that after years of struggling to get semantic mark up, we're littering our code with classes in the place of event handlers and parameter lists
- Secondly, that the DOM is being littered with code and behaviourally specific mark-up by careless scripting
In the future we’ll be cursing our former selves for being so stupid as to litter our DOM with odd classes and needless event handlers, as we try to parse the interface and perform complex XML style translations on them, dynamically for the use of our new thought-controlled mental sub-browsers.
We should aim to keep our generated source code as clean as the original mark up, and our scripting clean and abstracted, that way we won't become the HTML litter-bugs of the future.
(image by Leo Reynolds)
But how, Dan?
Oh, there’s always one.. ;)
I’ll go into this in a bit more detail. Suffice to say, think carefully about who might be using your altered DOM before you start adding or removing elements from it using javascript.