debug用クラスを DOMのみで作成してみる。

README

※デバッグ用のクラスをDOMで作ってみるテスト※
・インターフェース
　デバッグ用のクラスは以下の様な構造になっています。

　　new DebugElement(elem)
　　　指定した要素をデバッグ用とします。
　　　@param elem 表示先の要素

　　new DebugElement(idName)
　　　指定したIdの要素をデバッグ用とします。
　　　@param idName 表示対象の要素のId

　　debugElement.print(text)
　　　指定した文字列をデバッグ用要素の末尾に追加します。
　　　@param text [オプション]表示する文字
　　　@return 追加した要素

　　debugElement.print(elem)
　　　指定した要素をデバッグ用要素の末尾に追加します。
　　　@param elem [オプション]追加する要素
　　　@return 追加した要素

　　debugElement.print(text,tagName,attributes)
　　　指定した値を元に要素を作成し、デバッグ用要素の末尾に追加します。
　　　@param text [オプション]追加する要素内の文字列を指定します。
　　　@param tagName [オプション]追加する要素のタグ名
　　　@param attributes [オプション]追加する要素の属性をkey:value形式で纏めた連想配列
　　　@return 追加した要素

　　debugElement.clear()
　　　デバッグ用要素に追加した要素を全て削除します。
　　　(デバッグ用要素をDebugElement作成時に戻します。)

尚、作成したけれど結局使わなかった関数は下記となります。

　　debugElement.removeAll();
　　　デバッグ用要素内の要素を全て削除します。
　　　問題点:一つ一つremoveChildしていた為、低速。実用に向かない為無かった事に。
　　　現在の方法は debugElement.clear() に書いてある通り、
　　　作成時の要素のclone で replaceChildNodeを行うという方法に変更されました。

内部のprivate static な関数の説明

　　tools.isElement(elem)
　　　指定した変数が要素であるかを判別します。プロパティを元に判別
　　　@param elem 調べる要素と思われる変数
　　　@return 変数が要素であるかの真偽値、要素であれば真を返す。

　　tools.addElement(tagName,text,attributes)
　　　指定された要素を作成する。
　　　@param tagName 作成する要素のタグ名
　　　@param text 作成する要素内の文字列
　　　@param attributes 作成する要素の属性群
　　　@return 作成した要素


尚、_XX な名前のプロパティ、関数に関しての説明はなしということで。
以上。

jsdoit.css

body { background-color: #DDDDDD; font: 30px sans-serif; }

jsdoit.html

<div id="output">
    テスト
</div>

jsdoit.js

var DebugElement = function($){
    var properties = { "inited_failed":"要素が設定出来ていません","default_tagName":"div","default_text":"","default_attributes":{} };
    var tools = {
        "isElement":function(elem)/* 要素判別関数 */{ return (elem && elem.getElementsByTagName)?true:false;},
        "createElement":function(tagName,text,attributes){
            if(!(typeof tagName === "string"))tagName = properties.default_tagName;
            if(!(typeof text ==="string"))text=propreties.default_text;
            if(!(attributes instanceof Array || attributes instanceof Object))attributes =properties.default_attributes;
            var elem = $.createElement(tagName);
            tools._setAttributeNodes(elem,attributes);
            tools._setTextNode(elem,text);
            return elem;
        },
        "_setTextNode":function(elem,text)/* 文字ノード追加関数 */{ var tn = $.createTextNode(text); elem.appendChild(tn); return elem},
        "_setAttributeNodes":function(elem,attributes)/* 属性追加関数[複数] */{ for(var key in attributes) tools._setAttributeNode(elem,key,attributes[key]); },
        "_setAttributeNode":function(elem,akey,avalue)/* 属性追加関数[単数] */{ var attr = $.createAttribute(akey);attr.nodeValue = avalue; elem.setAttributeNode(attr);return elem; },
        "replaceNode":function(newNode,oldNode)/* 要素置換関数 */{ oldNode.parentNode.replaceChild(newNode,oldNode); return newNode;}
    }
    var methods = function(debugElement){
        
        var _elem=null,elem=null;
        if(tools.isElement(debugElement))elem = debugElement;
        else if(typeof debugElement === "string" && tools.isElement(_elem = $.getElementById(debugElement))) elem = _elem;
        if(!(tools.isElement(elem))) throw properties.inited_failed;
        else this._c = (this._e = elem).cloneNode(true);
    }
    methods.prototype ={
        "_e":null,/* 表示の為の要素 */
        "_c":null,/* 表示の為の要素の初期状態 */
        "print":function(text,tagName,attributes){
            var elem =null;
            if(tools.isElement(text)){
            	elem = text;
            }else{
				elem = tools.createElement(tagName,text,attributes);
            }
            if(tools.isElement(elem)) this._e.appendChild(elem);
            return elem;
        },
        "clear":function(){
            this._e = tools.replaceNode(this._c.cloneNode(true),this._e);
        }
    };
	return methods;
}(document);
//出力例
(function(test){
    var start =1;
    var counter =start;
    var end =10;
    var key = setInterval(function(){
        if(counter>end){
            //クリア
        	test.clear();
            counter =start;
        }else{
            //表示
            test.print("test"+counter);
            counter++;
        }
    },1000);
})(new DebugElement("output"));