Introducing DOMBuilder

I hate the DOM. Actually, I take that back. I love the DOM, but I hate the fact that generating DOM nodes in JavaScript is so verbose and unintuitive. You need to construct a new element, then add properties, then construct a child element, then add properties, then append the child to the parent, and the parent to whatever DOM object you want that’s already in the page.

A few years ago I discovered Builder.node(), a component of Scriptaculous. The problem is that Scriptaculous relies on Prototype, and both are HUGE JavaScript libraries. Later I moved to Moo.fx/MooTools, then I didn’t do much JavaScript for a while, then I started doing a lot with YUI, while sprinkling a little jQuery around here and there. None of these other frameworks had an equivalent to Builder.node(), and again, that sucks.

So last night, I wrote a small JavaScript class to handle this very thing. Introducing DOMBuilder. DOMBuilder is small, fast, and doesn’t depend on any other JavaScript frameworks meaning that it’s easy to use in any project where you need to construct nested DOM elements. The fully commented debug version clocks in around 3k. The minified version is 739 bytes. With gzip compression, it squeezes down to a mere 393 bytes.

It’s not quite as terse or elegant as I’d like (yet), but it’s a good result for about 2 hours of hacking.

Examples

Here’s the HTML we want to generate:

<div class="location_select_control">
	<a href="" class="location_select_label">
		<label>This is my label</label>
	</a>
</div>

Here is how we’d do it with the standard DOM:

control_div = document.createElement('div');
control_div.className = "location_select_control";
control_link = document.createElement('a');
control_link.href = "";
control_link.className = "location_select_label";
control_label = document.createElement('label');
control_label.innerHTML = "This is my label";
control_link.appendChild(control_label);
control_div.appendChild(control_link);
document.body.appendChild(control_div);

Lastly, here’s how we’d do it with DOMBuilder:

document.body.appendChild($dom('div', { class:'location_select_control' }).child(
	$dom('a', { href:'', class:'location_select_label' }).child(
		$dom('label').innerHTML('This is my label')
	)
).asDOM());

Download

This code is BSD licensed, so feel free to use it in personal or commercial projects. You can download it from Github.

Tarzan 2.0 is finally here!

After 18 months of ongoing development, I am proud to announce the immediate availability of Tarzan 2.0! The Tarzan platform has complete support for six different AWS services (S3, CloudFront, EC2, SimpleDB, SQS, and Amazon Associates) and has been built from the ground-up to be fast, memory-efficient, easy to use, and easy to build on top of by providing a solid set of core tools for your (and our) web application.

You can download the 2.0 release from http://bit.ly/tarzan2, and please Digg us at http://bit.ly/digg-tarzan.

New Tarzan pre-release is available!

Today we announce an updated Tarzan pre-release build for any developers not using the subversion trunk. A lot of work has gone into Tarzan over the past 2 months since the last release, namely:

• Added the ability to change the content-type of an existing object in S3.
• Fixed some minor bugs in SimpleDB and S3.
• Re-wrote all of the documentation in the entire project (which enables us to generate awesome documentation which can be found on the Tarzan documentation page).
• Launched an entirely new website!
• Added support for caching frequently requested data to enhance performance. Caching types currently include file-based, APC, MySQL, PostgreSQL, and SQLite. Informal tests tend to show a speed-up of between 600x-1000x, depending on the request and the type of cache being used.

If you’d rather not use the bleeding-edge subversion trunk builds, you can grab the latest pre-release build from the Tarzan download page. Check it out!