HTML DOM Viewer

说明：用来查看DOM的工具，可以当作手册来用，也可以用来Debug,很方便的说
把代码copy到要调试的页面中，浏览时点击DOM Tester链接就会打开DOM查看，双击展开对象，右边的文本框里显示的是属性值，修改文本框会改变对应的属性，用来调试配色什么的还是满方便的说....呵呵
其实代码本身没什么技术含量，核心就是用 for in 语句来取对象的属性而已，要说有什么亮点.....嗯......不知道窗口间的函数调用算不算......
-+-+-+-+-+-+-+-+-+-+偶是传说中的无敌分割线-+-+-+-+-+-+-+-+-+-+
1/21更新
俺这两天在研究兼容性,所以就把代码重写了下,现在支持IE5.0+ & FF 1.5.01
用这个可以明显看出FF与IE的不同,呵呵

domWin="";
function showDOM(){
try{
domWin=open("");
domWin.opener=top;
domWin.document.close();
try{
domWin.moveTo(0,0);
domWin.resizeTo(screen.availWidth,screen.availHeight);
}catch(e){}
initDOMWin();
expandLevels(1);
}catch(e){alert(e);}
}

function initDOMWin(){
//set body style
with(domWin.document.body.style){
padding=0;
margin=0;
fontSize=12;
fontFamily="Arial";
borderWidth=0;
backgroundColor="#FFF";
color="#444";
cursor="default";
overflow="auto";
}

//insert a table
var theD=domWin.document.createElement("TABLE");
with(theD.style){
width="99%";
height="99%";
fontSize=12;
fontFamily="Arial";
borderWidth=0;
backgroundColor="#FFF";
color="#444";
cursor="default";
}
domWin.document.body.appendChild(theD);

//insert the first row to display the object's location
var theR=theD.insertRow(theD.rows.length);
var theC=theR.insertCell(theR.cells.length);
theC.colSpan=2;
with(theC.style){
height="20px";
borderWidth=1;
borderColor="#000";
borderStyle="solid";
paddingLeft=10;
}
theC.id="oIDPath";
theC.innerHTML="top";

//insert the main row
theR=theD.insertRow(theD.rows.length);
//insert the left cell to display the tree
theC=theR.insertCell(theR.cells.length);
with(theC.style){
width=parseInt(domWin.document.body.clientWidth*0.8);
height="100%";
fontSize=12;
fontFamily="Arial";
borderWidth=0;
cursor="default";
}
theD=domWin.document.createElement("DIV");
with(theD.style){
width="100%";
height=domWin.document.body.clientHeight-38;
overflow="auto";
fontSize=12;
fontFamily="Arial";
cursor="default";
}
theC.appendChild(theD);

//insert the root-node element
addDOMItem(theD,"top","top").id="tRoot";

//insert the textarea to display the attribute
theC=theR.insertCell(theR.cells.length);
with(theC.style){
width="auto";
height="99%";
fontSize=12;
fontFamily="Arial";
borderWidth=0;
verticalAlign="top";
cursor="default";
}
theD=domWin.document.createElement("textarea");
with(theD.style){
width="100%";
height=domWin.document.body.clientHeight-108;
overflow="auto";
color="#444";
cursor="default";
}
theD.id="txtAttr";
theD.value="";
theD.onchange=setAtt;
theC.appendChild(theD);

theD=domWin.document.createElement("input");
with(theD.style){
width="69%";
height=20;
borderWidth=1;
color="#444";
cursor="default";
}
theD.type="button";
theD.value="Expand levels:";
theD.onclick=expandLevels;
theC.appendChild(theD);
theD=domWin.document.createElement("input");
with(theD.style){
width="28%";
height=21;
color="blue";
}
theD.value=2;
theC.appendChild(theD);
}

function addDOMItem(parentNode,name,oID,oType){
oType=oType?oType:"object";
var strPreTemp="