HTML DOM Viewer_javascript技巧

说明：用来查看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": list;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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]