欢迎来到代码驿站！

JavaScript代码

当前位置：首页 > 网页前端 > JavaScript代码

HTML DOM Viewer

时间：2021-05-14 10:38:14|栏目：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":                 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>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

上一篇：js实现功能比较全面的全选和多选

栏目：JavaScript代码

下一篇：正则表达式搭配js轻松处理json文本方便而老古

本文标题：HTML DOM Viewer

本文地址：http://www.codeinn.net/misctech/121280.html

更多JavaScript代码

阅读排行

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。

如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。

联系QQ：914707363 | 邮箱：codeinn#126.com(#换成@)

Copyright © 2020 代码驿站版权所有