Written by on 2008-01-14

JavaScript DOM Object Parser

Javascript

Ich sitze grade mitten drin, meine XML Ausgaben zu zerlegen um an die Daten zu kommen.
Da das teilweise wirklich unübersichtlich wird, habe ich mir zweit Stunden Zeit genommen und mir einen Parser  geschrieben, der mir ein beliebiges DOM Objekt als Baum ausgibt.
Aus dieser XML Struktur:

baut er mir zum Beispiel das hier:

Um das Ganze noch mal näher zu betrachten:

Der Parser selbst befindet sich in einer JS Datei namens Debug.js
Diese bindet man über

<script type="text/javascript" src="debug.js"></script>

ein und mit

DEBUG.moveDIV(600,25);

kann man das Ausgabefenster noch an eine Stelle verschieben, wo es nicht stört.
Das eigentlich Parsen passiert dann so:

DEBUG.showParse(object);

Hierbei kann Object z.B.

document

sein, als auch zum Beispiel

o.responseXML.documentElement.

Das Script selber sieht so aus:


var DEBUG = {};

DEBUG.div = document.createElement("div");
DEBUG.linkdiv = document.createElement("div");
DEBUG.linkcontent = document.createElement("p");
DEBUG.JSADDs = document.createElement("script");
DEBUG.CSSADDs = document.createElement("style");

DEBUG.JSADDs.appendChild(document.createTextNode('function D_showLink(no){var obj = new Object(); var str = DEBUG.nodeLinks[no]; DEBUG.linkcontent.innerHTML = "Node #"+no+":<br />"+str+": <br />"; try{var obj = eval(str); var val = eval(str+".nodeValue"); }finally{DEBUG.linkcontent.innerHTML += "<u>"+obj.className+"</u>.<b>"+obj.nodeName+"</b>:<br />s:"+obj+"<br />v:"+obj.nodeValue;}}'));

DEBUG.CSSADDs.appendChild(document.createTextNode(' #D_out{}'));
DEBUG.CSSADDs.appendChild(document.createTextNode(' #D_link{background-color:lightyellow; border: 1px black dashed;}'));
DEBUG.CSSADDs.appendChild(document.createTextNode(' .D_nodeT1{background-color:#adadad;}'));
DEBUG.CSSADDs.appendChild(document.createTextNode(' .D_nodeT2{background-color:lightgreen;} '));
DEBUG.CSSADDs.appendChild(document.createTextNode(' .D_nodeT3{background-color:white;} '));
DEBUG.CSSADDs.appendChild(document.createTextNode(' .D_nodeT4{background-color:lime;} '));
DEBUG.CSSADDs.appendChild(document.createTextNode(' .D_nodeT8{background-color:white;} '));
DEBUG.CSSADDs.appendChild(document.createTextNode(' .D_nodeT9{background-color:#dedede;} '));



DEBUG.TagCounts = new Array();
DEBUG.nodeLinks = new Array();
DEBUG.nodeNums = 0;

DEBUG.nodeTypes = new Array();
DEBUG.nodeTypes[1] = 'Elementknoten';
DEBUG.nodeTypes[2] = 'Attributknoten';
DEBUG.nodeTypes[3] = 'Textknoten';
DEBUG.nodeTypes[4] = 'Knoten für CDATA-Bereich';
DEBUG.nodeTypes[5] = 'Knoten für Entity-Referenz';
DEBUG.nodeTypes[6] = 'Knoten für Entity';
DEBUG.nodeTypes[7] = 'Knoten für Verarbeitungsanweisung';
DEBUG.nodeTypes[8] = 'Knoten für Kommentar';
DEBUG.nodeTypes[9] = 'Dokument-Knoten';
DEBUG.nodeTypes[10] = 'Dokumenttyp-Knoten';
DEBUG.nodeTypes[11] = 'Dokumentfragment-Knoten';
DEBUG.nodeTypes[12] = 'Knoten für Notation';

DEBUG.isInit = false;
DEBUG.init = function(){
    if(DEBUG.isInit) return;
    var body = document.getElementsByTagName("body")[0];
    var head = document.getElementsByTagName("head")[0];
    var first = body.firstChild;
    var style = document.createElement("style");
    var alink = document.createElement("a"); 
    
    alink.setAttribute("name", "D_link");
    
    DEBUG.CSSADDs.setAttribute("type", "text/css");
    DEBUG.JSADDs.setAttribute("type", "text/javascript");
    
    DEBUG.div.setAttribute("id", "D_out");
    DEBUG.linkdiv.setAttribute("id", "D_link");

    DEBUG.div.innerHTML = '<p style="background-color:lightyellow; border: 1px black dashed">(<nodeType>): <u><className></u>.<b><nodeName></b> <o.toString()></p>';
    DEBUG.linkcontent.innerHTML = "nr-----------------------------------nr";
    alink.appendChild(DEBUG.linkcontent); 
    
    DEBUG.linkdiv.appendChild(alink);
    DEBUG.str = 'o';
    
    body.insertBefore(DEBUG.linkdiv, first);
    body.appendChild(DEBUG.div);
    head.appendChild(DEBUG.CSSADDs);
    head.appendChild(DEBUG.JSADDs);  

    DEBUG.isInit = true;
}

DEBUG.makeTagLink = function(str, tag){
	var out = '';
	var n = DEBUG.TagCounts[tag] || 0;
	DEBUG.nodeLinks[DEBUG.nodeNums] = str+'.getElementsByTagName("'+tag+'")['+n+']';
	DEBUG.TagCounts[tag] = n+1;	
	out = 'D_showLink('+DEBUG.nodeNums+')';
	DEBUG.nodeNums++;		
	return out;
}

DEBUG.makeAttrLink = function(ptag,attr){
	var out = '';
	DEBUG.nodeLinks[DEBUG.nodeNums] = DEBUG.nodeLinks[ptag]+'.getAttribute("'+attr+'")';
	out = 'D_showLink('+DEBUG.nodeNums+')';
	DEBUG.nodeNums++;	
	return out;
}

DEBUG.makeTextLink = function(ptag, no){
	var out = '';
	DEBUG.nodeLinks[DEBUG.nodeNums] = DEBUG.nodeLinks[ptag]+'.childNodes['+no+']';
	out = 'D_showLink('+DEBUG.nodeNums+')';
	DEBUG.nodeNums++;	
	return out;
}

DEBUG.showParse = function(o, str){
    DEBUG.init();
    DEBUG.div.innerHTML += '<p style="background-color:skyblue; border: 1px black dashed"><u>'+o.className+'</u>.<b>'+o.nodeName+'</b></p>';
    DEBUG.div.innerHTML += DEBUG.parse(o, str);
}

DEBUG.moveDIV = function(x,y){
	DEBUG.div.style.position = 'absolute;';
	DEBUG.div.style.top = ''+x+'px;';
	DEBUG.div.style.left = ''+y+'px';
}

DEBUG.parse = function(o, str){
	if (typeof str == "undefined" || !str) str = 'o';
        if (typeof o == "undefined" || !o) o = document;
	var out = '<dir style="list-style-type:none">';
	if(o === DEBUG.div) return out +'</dir>';
	
	out += '<li class="D_nodeT'+o.nodeType+'">│<br />│('+DEBUG.nodeTypes[o.nodeType]+'): <u>'+o.className+'</u>.<b>'+o.nodeName+'</b> '+o.toString()+'<a onClick="'+DEBUG.makeTagLink(str, o.nodeName)+'" href="#D_link">()</a></li>';
	
	var ptag = DEBUG.nodeNums-1;
	if(o.hasAttributes()){
            var count = o.attributes.length || 0;
            out += '<li class="D_nodeT'+o.nodeType+'">';
            out += '├'+count+' attribute(s)';
            out +='<dir style="list-style-type:none">';
            for(var i=0; i < count; i++){
                    out += '<li class="D_nodeT'+o.attributes[i].nodeType+'">├('+DEBUG.nodeTypes[o.attributes[i].nodeType]+'): <u>'+o.attributes[i].className+'</u>.<b>'+o.attributes[i].nodeName+'</b> » '+o.attributes[i].nodeValue+'<a onClick="'+DEBUG.makeAttrLink(ptag, o.attributes[i].nodeName)+'" href="#D_link">()</a></li>';
            }
            out += '</dir>';
            out +='</li>';		
	}
	

	if(o.hasChildNodes()){
            var count = o.childNodes.length;
            out += '<li class="D_nodeT'+o.nodeType+'">';
            out += '├'+count+' child(s)';
            out +='<dir style="list-style-type:none">';
            for(var i=0; i < count; i++){
                if(o.childNodes[i].childNodes.length > 0){
                    out += '<li class="D_nodeT'+o.childNodes[i].nodeType+'">'+DEBUG.parse(o.childNodes[i],str)+'</li>';
                }else{
                    if((o.childNodes[i].nodeName == '#text' || o.childNodes[i].nodeName == '#comment') && o.childNodes[i].data.length > 0){
                            out += '<li class="D_nodeT'+o.nodeType+'">│('+DEBUG.nodeTypes[o.childNodes[i].nodeType]+'): <u>'+o.childNodes[i].className+'</u>.<b>'+o.childNodes[i].nodeName+'</b> '+o.childNodes[i].toString()+'<a onClick="'+DEBUG.makeTextLink(ptag, i)+'" href="#D_link">()</a>';				
                            out += '<br />├<span class="D_nodeT'+o.childNodes[i].nodeType+'" style="border: 1px black dashed">'+o.childNodes[i].data+'</span>';	
                    }else{
                            out += '<li class="D_nodeT'+o.nodeType+'">│('+DEBUG.nodeTypes[o.childNodes[i].nodeType]+'): <u>'+o.childNodes[i].className+'</u>.<b>'+o.childNodes[i].nodeName+'</b> '+o.childNodes[i].toString()+'<a onClick="'+DEBUG.makeTagLink(str, o.childNodes[i].nodeName)+'" href="#D_link">()</a>';				
                    }	
                    out += "</li>";
                }
            }
            out += '</dir>';
            out +='</li>';		
	}
	
	out += '</dir>';
	return out;
}

2 comments

  • Niko has written:

    Hi, dein Link zum Parser ist leider tot.

  • Philipp Haußleiter has written:

    stimmt auffallend..
    ich werd heute Abend mal einen neuen Upload machen.
    UPDATE:
    Ich habe den (falschen) Link angepasst und nun geht es 🙂
    Ist vorher aber wohl nicht aufgefallen ;-).

Leave a Reply