偶又来发原创了呵呵....秉承俺的一贯风格，依然是IE Only

说明：用来查看DOM的工具，可以当作手册来用，也可以用来Debug,很方便的说
把代码copy到要调试的页面中，浏览时点击DOM Tester链接就会打开DOM查看，双击展开对象，右边的文本框里显示的是属性值，修改文本框会改变对应的属性，用来调试配色什么的还是满方便的说....呵呵

其实代码本身没什么技术含量，核心就是用 for in 语句来取对象的属性而已，要说有什么亮点.....嗯......不知道窗口间的函数调用算不算......

-+-+-+-+-+-+-+-+-+-+偶是传说中的无敌分割线-+-+-+-+-+-+-+-+-+-+
1/21更新
俺这两天在研究兼容性,所以就把代码重写了下,现在支持IE5.0+ & FF 1.5.01
用这个可以明显看出FF与IE的不同,呵呵
<script>
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="<li>";
 var theD=domWin.document.createElement("DIV");
 with(theD.style){
  width="auto";
  height="16px";
  overflow="visible";
  fontSize=12;
  fontFamily="Arial";
  paddingLeft=5;
  paddingRight=10;
  paddingTop=1;
  paddingBottom=0;
  borderColor="#FFF";
  borderWidth=1;
  borderStyle="solid";
  backgroundColor="#FFF";
  color="#444";
  cursor="default";
  switch(oType){
   case "object":
    listStyle="circle";
   break;
   case "attribute":
    listStyle="square";
   break;
   case "event":
    listStyle="";strPreTemp="";
   break;
  }
 }
 theD.onmouseover=domItem_onmouseover;
 theD.onmouseout=domItem_onmouseout;
 theD.onclick=domItem_onclick;
 theD.expand=theD.ondblclick=domItem_ondblclick;
 theD.onselectstart=cancelAll;
 theD.onselect=cancelAll;
 theD.innerHTML=strPreTemp+name;
 theD.oID=oID;
 
 return(parentNode.appendChild(theD));
 
}

function domItem_onmouseover(){
 with(this.style){
  borderColor="#777";
  borderStyle="solid";
  backgroundColor="#EAEAF9";
  color="#000";
  paddingLeft=4;
  paddingRight=11;
  paddingTop=0;
  paddingBottom=1;
 }
}

function domItem_onmouseout(){
 with(this.style){
  borderColor="#FFF";
  borderStyle="solid";
  backgroundColor="#FFF";
  color="#444";
  paddingLeft=5;
  paddingRight=10;
  paddingTop=1;
  paddingBottom=0;
 }
}

function domItem_onclick(){
 try{
  domWin.document.all.oIDPath.innerHTML=this.oID;
  domWin.document.all.txtAttr.value=eval(domWin.document.all.oIDPath.innerHTML);
 }catch(e){}
}

function domItem_ondblclick(){
 try{
  var theO=eval(this.oID);
  if(typeof(theO)!="object"){return(false);}
  if(this.nextSibling){
   if(this.nextSibling.getAttribute("type")=="sub"){
    this.nextSibling.style.display=this.nextSibling.style.display=="block"?"none":"block";
    return(false);
   }
  }
  var theD=domWin.document.createElement("DIV");
  with(theD.style){
   paddingLeft=10;
   marginLeft=10;
   paddingTop=paddingBottom=4;
   borderLeftColor="#999";
   borderLeftStyle="dotted";
   borderLeftWidth=1;
   display="block";
  }
  
  theD.setAttribute("type","sub");
  this.parentNode.insertBefore(theD,this.nextSibling);
  var aryO=new Array();//sub objects
  var aryA=new Array();//attributes
  var aryE=new Array();//events
  for(var i in theO){
   try{
    if(i.indexOf("on")==0){
     aryE[aryE.length]=i;
    }else{
     try{
      if(typeof(theO[i])=="object"){
       aryO[aryO.length]=i;
      }else{
       aryA[aryA.length]=i;
      }
     }catch(e){
      aryO[aryO.length]=i;
     }
    }
   }catch(e){}
  }
  aryO.sort();
  aryE.sort();
  aryA.sort();
  for(var i=0;i<aryO.length;i++)addDOMItem(theD,aryO[i],this.oID+"."+aryO[i]);
  for(var i=0;i<aryA.length;i++)addDOMItem(theD,aryA[i],this.oID+"."+aryA[i],"attribute");
  for(var i=0;i<aryE.length;i++)addDOMItem(theD,aryE[i],this.oID+"."+aryE[i],"event");
  
  return(false);
 }catch(e){}
}

function cancelAll(){
 try{
  domWin.event.cancelBubble=true;
  domWin.event.returnValue=false;
  return(false);
 }catch(e){alert(e);}
}

function setAtt(){
 try{
  eval(domWin.document.all.oIDPath.innerHTML+"=\""+addSlash(domWin.document.all.txtAttr.value)+"\"");
 }catch(e){
  domWin.alert("设置失败");
 }
}

function addSlash(str){
 return(str.replace(/\\/g,"\\\\").replace(/\r/g,"\\r").replace(/\n/g,"\\n").replace(/\t/g,"\\\t").replace(/\"/g,"\\\"").replace(/\'/g,"\\\'"));
}

function expandLevels(intLevels){
 try{
  try{intLevels=intLevels?intLevels:this.nextSibling.value;}catch(e){intLevels=1;}
  intLevels=isNaN(intLevels)?1:parseInt(intLevels);
  intLevels=(intLevels<1||intLevels>5)?1:intLevels;
  var theObj=domWin.document.all.tRoot;
  var curLevel=1;
  while(curLevel>0&&theObj){
   try{theObj.expand();}catch(e){alert(e);return(false);}
   if(theObj.nextSibling){
    if(theObj.nextSibling.getAttribute("type")=="sub"){
     if(theObj.nextSibling.childNodes.length>0&&curLevel<intLevels){
      theObj=theObj.nextSibling.childNodes[0];
      curLevel++;
     }else{
      theObj=theObj.nextSibling.nextSibling;
     }
    }else{
     theObj=theObj.nextSibling;
    }
   }else{
    theObj=theObj.parentNode.nextSibling;
    curLevel--;
   }
  }
 }catch(e){alert(e);}
}
</script>
<a href="javascript:showDOM();void(0);" target="_self">test DOM</a>