DOMExtender

This function modifies the node to have the sorts of methods it should have been packaged with. It directly modifies the node.

by morrison

HTML

<div id='foo' class='jamison cloudio'></div>

CSS

h1{
    margin:0;
    padding:.5em 0;
}
p {
    margin:0;
    padding:0;
    text-indent:2em;
}
.failure {
    background:red;
}
.success {
    background:lightgreen;
}

JavaScript

var DOMExtender = function(node) {
    //This function modifies the node to have the sorts of methods it should
    //have been packaged with.  It directly modifies the node.
    //class management
    node.hasClass = function(sClass) {
        return this.className.match(new RegExp('(\\s|^)' + sClass + '(\\s|$)')) ? true : false;
    };

    node.addClass = function(sClass) {
        var node = this;
        if (!node.hasClass(sClass)) {
            node.className += " " + sClass;
        }
    };

    node.removeClass = function(sClass) {
        var node = this;
        if (node.hasClass(sClass)) {
            node.className = node.className.replace(new RegExp('(\\s|^)' + sClass + '(\\s|$)'), ' ');
        }
    };

    //event management
    if (node.attachEvent && !node.addEventLister) {
        node.addEventListener = function(event, fn) {
            node.attachEvent('on' + event, fn);
        };
    }

    if (node.detachEvent && !node.removeEventLister) {
        node.removeEventListener = function(event, fn) {
            node.detachEvent('on' + event, fn);
        };
    }

    return node;

};
$ = DOMExtender;


//Tests
var foo = document.getElementById('foo');
var $foo = $(foo);

var log = function(message) {
    document.write(message ? message : "");
};
var failure = function(message) {
    log("<p class='failure'>Failure:" + message + "</p>");
};
var success = function(message) {
    log("<p class='success'>Success:" + message + "</p>");
};

document.write('\n<h1>Commencing unit tests...</h1>');

// hasClass() tests
if ($foo.hasClass('missingClass')) {
    failure('hasClass("missingClass")');
} else {
    success('hasClass("missingClass")');
}

if ($foo.hasClass('jamison')) {
    success('hasClass("jamison")');
} else {
    failure('hasClass("jamison")');
}

// addClass() test
$foo.addClass('tallyHo');
if ($foo.hasClass('tallyHo')) {
    success('addClass("tallyHo")');
} else {
    failure('addClass("tallyHo")');
}

// removeClass()...