When I taught a bunch of students last month the ways of the DOM and explained progressive enhancement they were very happy about the ideas but rightfully exclaimed that DOM scripting can get verbose and repetitive. This is when I had to idea to write ViewsHandler , a small framework to write DOM applications.

ViewsHandler is not meant to be a JavaScript templating engine, as I found that whilst you have to create a lot of HTML with DOM, the parts that change in the app are not that many. Templating engines would replace the whole view, ViewsHandler instead offers you to create HTML, add it to a shell or application canvas and store references to the parts that change. That way you only create your HTML once and then only do minor changes to cached DOM elements when you need to.

As a demo I created a small Flickr slide show using ViewsHandler which was exactly the task that I had given my class :)

What do you think?

During the course I am currently giving in Sunnyvale on basics of the DOM and progressive enhancement I asked the attendees which methods seem to be missing in the native DOM implementation and this is what we came up with:

• createLink(url,text) – a shortcut method to create a link with a text node inside – something you constantly have to do when creating interfaces
• insertAfter(newNode,oldNode) – there is an insertBefore, but no insertAfter
• removeNode(node) – the native removeChild is convoluted
• textElement(elementName,text) – it seems not necessary to create an Element, then create a text node and apply it, this could be one step
• addScript(url) – to lazy-load JavaScripts
• normalizeNode(node) – to remove those pesky line-breaks that interfere with nextSibling or previousSibling
• getText(node) – retrieving the text content of a node that is either a text or an element node
• setText(node,text) – setting the text regardless of node type

I asked the attendees to come up with a method each and to present them, here’s what we got:

jukuhelpers = function(){

function createLink(url,text,cssClass){

var link =  document.createElement(‘a’);

if (typeof url = 'string'){

link.setAttribute('href', url);

}

	
if (typeof text = ‘string’){

link.appendChild(document.createTextNode(text));

}
	
if (typeof cssClass = 'string'){

link.className = cssClass;

}
	
return link;

}
	
function insertAfter(newNode,oldNode){

oldNode.nextSibling

? oldNode.parentNode.insertBefore(newNode, oldNode.nextSibling)

: oldNode.parentNode.appendChild(newNode);

}
	
function removeNode(node){

if (node) {

node.parentNode.removeChild(node);

}
	
}

function textElement(elementName,text){

if (typeof text = ‘string’){

var txtElement = document.createElement(elementName);

var txtNode = document.createTextNode(text);

txtElement.appendChild(txtNode);

}
	
return txtElement;

}
	
function addScript(url){

var s = document.createElement(‘script’);

s.setAttribute(‘type’, ‘text/javascript’);

s.setAttribute(‘src’, url);

var head = document.getElementsByTagName(‘head’)[0];

head.appendChild(s);

}
	
function getText(node){

var txt;

if (node && node.nodeType = 1) {

if (node.hasChildNodes()) {

txt = node.firstChild.nodeValue;

}
	
}

if (node && node.nodeType = 3) {

txt = node.nodeValue;

}
	
return txt;

}
	
function setText(node,text){

if (node && node.nodeType = 1) {

if (node.hasChildNodes()) {

node.firstChild.nodeValue = text;

}
	
else {

node.appendChild(document.createTextNode(text));

}
	
}

if (node && node.nodeType = 3) {

node.nodeValue = text;

}
	
}

function normalizeNode(node){

if(node.hasChildNodes){

var spaceTest = /^s+$/;

var children = node.childNodes;

for(var i=0;children[i];i++){

if(children[i].nodeType === 3){

if(spaceTest.test(children[i].nodeValue)){

children[i].parentNode.removeChild(children[i]);

}
	
}

}
	
}

}
	
return{

createLink:createLink,

insertAfter:insertAfter,

removeNode:removeNode,

textElement:textElement,

addScript:addScript,

getText:getText,

setText:setText,

normalizeNode:normalizeNode

}
	
}();

You can get the jukuhelpers.js file if you want to use it yourself.

Anything else that is missing or any bugs in this?