The missing native DOM methods – according to my course attendees

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?

Tags: dom, domscripting, helper, juku, juku08, library