Yes, this is my first post and yes, it is a bit lame… but its a good way of reusing markup on webpages. I also thought I’d post something somewhat useful.

Anyway, here it is….

So, what is an XML DOM control? Basically it’s just a DIV tag with a class (so we know what the element should contain or do), and <!– comment –> nodes inside (for settings, such as the ID of a form element, or a url for AJAX requests).

So… let’s just say we have this following markup…

<div class="testClock"></div>

Now, how do we transform that into something functional or visible? We can add an event handler to the Window’s onLoad event. For example…

function controlLoad() {
var divs = document.getElementsByTagName('div');

for (var i = 0; i < divs.length; i++)
{
if (divs[i].className == 'testClock')
{
// Insert HTML / Whatever
}
}
}

// Bind the function to the event
if (window.addEventListener)
window.addEventListener('load', controlLoad, false); // Mozilla
else
window.attachEvent('onload', controlLoad); // IE

That’s it, at its simplest. Of course you’ll want to add more exciting markup/javascript for a real control, but that’s beyond the scope of this boring post!

One more thing… if you want to store variables for a control and have more than one instance of the control on the page, you’ll need to store them as comments somewhere in the DOM tree beneath the control tag.

So, what’s the point I hear you ask? Well, it helps simplify web development if you don’t use a WYSIWYG editor, and it can reduce the amount of data that browsers need to choke on whenever you load a page.

If you’re still staring blankly….. you’ve basically just read about how to reduce

<div><table>blah blah<yhrtjn trg></table></div>

to

<div class="myControl"><!--idOfStorageElement--></div>

The attached screenshot is a few controls I’ve created using this technique. One is a datetime picker, and another is an AJAX checkbox/radio button list.