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

This entry was posted on Thursday, July 31st, 2008 at 3:28 pm and is filed under javascript, libraries, webdevtrick. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.