HTML操作系

個人的にほしいなあと思うもの。
関数チックに書いてみっか。
prototype.jsよかMochiKitやdojoに惹かれてしまうんだよねえ。

if (typeof(kumu.dom) == 'undefined') {
    kumu.dom = {};
};

kumu.update(kumu.dom, {
    createDOM : function (name, attrs, text) {
        var element;
        var self = kumu.dom;
        if (typeof(name) == 'string') {
            if (attrs && "name" in attrs) {
                name = '<' + name + ' name="' + self.escapeHTML(attrs.name) + '">';
            }
            element = document.createElement(name);
        } else {
            element = name;
        }
        if (attrs) {
            self.updateNodeAttributes(elem, attrs);
        }
        if(text){
            var textN = document.createTextNode(text);
    	    element.appendChild(textN);
        }
        return element;
    },
  
    createDOMFunc : function (tags) {
        var name = tags;
	    return function (attrs, text){ 
	        return kumu.dom.createDOM(name, attrs ,text);
	    }
    },

    updateNodeAttributes : function (node, attrs) {
        var element = $i(node);
        if (attrs) {
            for (var k in attrs) {
                var v = attrs[k];
                if (k.substring(0, 2) == "on") {
                    if (typeof(v) == "string") {
                        v = new Function(v);
                    }
                    element[k] = v;
                } else {
                   element.setAttribute(k, v);
                }
           }  
        }
        return element;
    },
    
    insertBefore : function(node, ref){
        if((!node)||(!ref)){ 
	        return false; 
        }
        node = $i(node);
        ref = $i(ref);
	    var parent = ref.parentNode;
	    parent.insertBefore(node, ref);
	    return true;
    },

    insertAfter : function(node, ref){
        if((!node)||(!ref)){ 
	        return false; 
	    }
	    node = $i(node);
        ref = $i(ref);
	    var pn = ref.parentNode;
	    if(ref == pn.lastChild){
		    pn.appendChild(node);
	    }else{
		    return this.insertBefore(node, ref.nextSibling);
	    } 
	    return true;
    },

    insert : function(node, ref, position){
	    if((!node)||(!ref)||(!position)){ 
	        return false; 
	    }
        node = $i(node);
        ref = $i(ref);
	    switch(position.toLowerCase()){
		    case "before":
			    return kumu.dom.insertBefore(node, ref);
		    case "after":
			    return kumu.dom.insertAfter(node, ref);
		    case "first":
			    if(ref.firstChild){
				    return kumu.dom.insertBefore(node, ref.firstChild);
			    }else{
				    ref.appendChild(node);
				    return true;
			    }
		        break;
		    default: 
			    ref.appendChild(node);
			    return true;
	    }
    }
    
});

var UL = kumu.dom.createDOMFunc("ul");
var OL = kumu.dom.createDOMFunc("ol");
var LI = kumu.dom.createDOMFunc("li");
var TD = kumu.dom.createDOMFunc("td");
var TR = kumu.dom.createDOMFunc("tr");
var TBODY = kumu.dom.createDOMFunc("tbody");
var THEAD = kumu.dom.createDOMFunc("thead");
var TFOOT = kumu.dom.createDOMFunc("tfoot");
var TABLE = kumu.dom.createDOMFunc("table");
var TH = kumu.dom.createDOMFunc("th");
var INPUT = kumu.dom.createDOMFunc("input");
var SPAN = kumu.dom.createDOMFunc("span");
var A = kumu.dom.createDOMFunc("a");
var DIV = kumu.dom.createDOMFunc("div");
var IMG = kumu.dom.createDOMFunc("img");
var BUTTON = kumu.dom.createDOMFunc("button");
var TT = kumu.dom.createDOMFunc("tt");
var PRE = kumu.dom.createDOMFunc("pre");
var H1 = kumu.dom.createDOMFunc("h1");
var H2 = kumu.dom.createDOMFunc("h2");
var H3 = kumu.dom.createDOMFunc("h3");
var BR = kumu.dom.createDOMFunc("br");
var HR = kumu.dom.createDOMFunc("hr");
var LABEL = kumu.dom.createDOMFunc("label");
var TEXTAREA = kumu.dom.createDOMFunc("textarea");
var FORM = kumu.dom.createDOMFunc("form");
var P = kumu.dom.createDOMFunc("p");
var SELECT = kumu.dom.createDOMFunc("select");
var OPTION = kumu.dom.createDOMFunc("option");
var OPTGROUP = kumu.dom.createDOMFunc("optgroup");
var LEGEND = kumu.dom.createDOMFunc("legend");
var FIELDSET = kumu.dom.createDOMFunc("fieldset");
var STRONG = kumu.dom.createDOMFunc("strong");
var CANVAS = kumu.dom.createDOMFunc("canvas");

確認用HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>KumuDomTest</title>
<link rel="stylesheet" type="text/css" href="../css/jsUnitStyle.css">
<script language="JavaScript" type="text/javascript" src="../js/kumu.js?time=123" ></script>
<script language="JavaScript" type="text/javascript" src="../js/kumu/dom.js?time=123" ></script>
<script language="JavaScript" type="text/javascript">
var H1 = kumu.dom.createDOM('h1',null,'----A----');
var H2Func = H2;
var H2 = H2Func(null, '----B----');

</script>
</head>
<body>
<div id = "1">Test</div>
<form name="myForm">
	<input type="button" name="test1" value="test1" onclick="kumu.dom.insertBefore('1', 'target');">
	<input type="button" name="test2" value="test2" onclick="kumu.dom.insertAfter('1', 'target');">
	<input type="button" name="test3" value="test3" onclick="kumu.dom.insertAfter(H1, 'target');">
	<input type="button" name="test3" value="test4" onclick="kumu.dom.insertAfter(H2, 'target');">
</form>
<div id = "target">-------------------------</div>
</body>
</html>

んーnew Element()とかの方が好かれるのかどうか微妙だね。
うくく。